/* filename: ../app/css/3rdparty/quill/quill.snow.css */ /*! * Quill Editor v2.0.3 * https://quilljs.com * Copyright (c) 2017-2024, Slab * Copyright (c) 2014, Jason Chen * Copyright (c) 2013, salesforce.com */ .ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc} /*# sourceMappingURL=quill.snow.css.map*/ /* filename: ../app/css/application/application.css */ #application_container{ position: relative; display: block; height: 100%; width: 100%; background-image: var(--application-container-background-image--); background-color: var(--application-container-background-color--); font-family: var(--primary-font--); font-size: 20px; line-height: 0px; } .application_container_rtl{ background-image: var(--application-container-background-image-rtl--) !important; } #application_container .error_holder{ position: relative; display: block; top: calc(50% - 100px); } #application_container .error_holder .error_message{ position: relative; display: block; margin-top: 10px; top: 0px; left: 0px; width: 100%; height: auto; font-family: var(--primary-brand-font--); font-size: 26px; line-height: 40px; text-align: center; color: var(--primary-brand-color-blue--); } #application_container .error_holder .error_sub_message{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: auto; font-family: var(--primary-brand-font--); font-size: 18px; line-height: 40px; text-align: center; color: var(--primary-brand-color-blue--); } #application_container .error_holder .error_image{ position: relative; display: block; margin: 0 auto; top: 0px; left: 0px; width: 100px; height: 100px; } #title_bar{ position: relative; display: inline-block; top: 0px; left: 0px; padding-right:5px; padding-left: 0px; width: calc(100% - 5px); height: 60px; text-align: right; direction: ltr; border-bottom: 1px var(--application-title-bar-border-color--) solid; line-height: 38px; } .title_bar_rtl{ text-align: left !important; direction:rtl !important; padding-right:0px !important; padding-left: 5px !important; } #title_bar_text{ position: absolute; display: block; margin-top: 10px; margin-left: 12px; margin-right: 12px; top: 0px; left: 0px; width: auto; height: 100%; font-family: var(--primary-brand-font--); font-size: 32px; line-height: 40px; text-align: center; color: var(--application-titlebar-logo-text-color--); cursor: pointer; } .title_bar_text_rtl{ left: unset !important; right: 0px !important; } #title_bar_language_menu_button_holder{ position: relative; display: inline-block; margin-top: 5px; margin-right: 5px; margin-left: 5px; top: 0px; right: 0px; width: 100px; height: 50px; vertical-align: middle; } #title_bar_chat_button{ position: relative; display: none; margin-right: 5px; margin-left: 5px; top: 0px; right: 0px; margin-top: 5px; width: 50px; height: 50px; vertical-align: middle; border-radius: 25px; color: var(--primary-text-color-dark-gray--); background-color: var(--application-title-bar-button-background-color--); cursor: pointer; transition: 0.3s; } #title_bar_chat_button:hover{ background-color: var(--application-title-bar-button-hover-background-color--); transition: 0.3s; } #title_bar_chat_button_icon{ position: absolute; display: block; top: 10px; left: 10px; width: 30px; height: 30px; background-image:url('assets/images/icons/chat_black.svg'); background-size: contain; background-repeat: no-repeat; background-position: 0px 0px; } #title_bar_chat_button:hover #title_bar_chat_button_icon{ background-image:url('assets/images/icons/chat_white.svg'); } #title_bar_chat_button_text{ position: absolute; display: none; top: 0px; right: -10px; width: 30px; height: 20px; font-family: var(--primary-font--); font-size: 12px; line-height: 20px; color: var(--primary-text-color-white--); text-align: center; background-color: var(--color-unread-message-green--); border-radius: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #title_bar_notifications_button{ position: relative; display: none; margin-top: 5px; margin-right: 5px; margin-left: 5px; top: 0px; right: 0px; width: 50px; height: 50px; vertical-align: middle; border-radius: 25px; color: var(--primary-text-color-dark-gray--); background-color: var(--application-title-bar-button-background-color--); cursor: pointer; transition: 0.3s; } #title_bar_notifications_button:hover{ background-color: var(--application-title-bar-button-hover-background-color--); transition: 0.3s; } #title_bar_notifications_button_icon{ position: absolute; display: block; top: 10px; left: 10px; width: 30px; height: 30px; background-image:url('assets/images/icons/notifications_black.svg'); background-size: contain; background-repeat: no-repeat; background-position: 0px 0px; } #title_bar_notifications_button:hover #title_bar_notifications_button_icon{ background-image:url('assets/images/icons/notifications_white.svg'); } #title_bar_notifications_button_text{ position: absolute; display: none; top: 0px; right: -10px; width: 30px; height: 20px; font-family: var(--primary-font--); font-size: 12px; line-height: 20px; color: var(--primary-text-color-white--); text-align: center; background-color: var(--color-unread-message-green--); border-radius: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #title_bar_login_button{ position: relative; display: none; margin-right: 5px; margin-left: 5px; top: 0px; right: 0px; margin-top: 5px; padding-left: 20px; padding-right: 20px; width: auto; height: 50px; vertical-align: middle; direction: ltr; border-radius: 25px; color: var(--primary-text-color-dark-gray--); background-color: var(--color-light-blue--); cursor: pointer; transition: 0.3s; } .title_bar_login_button_rtl{ direction: rtl !important; } #title_bar_login_button:hover{ background-color: var(--primary-brand-color-blue--); transition: 0.3s; } #title_bar_login_button_icon{ position: relative; display: inline-block; top: 10px; width: 30px; height: 30px; background-image:url('assets/images/icons/account_circle_black.svg'); background-size: contain; background-repeat: no-repeat; background-position: 0px 0px; } #title_bar_login_button:hover #title_bar_login_button_icon{ background-image:url('assets/images/icons/account_circle_white.svg'); } #title_bar_login_button_text{ position: relative; display: inline-block; padding-left: 2px; padding-right: 2px; top: 0px; font-family: var(--primary-font--); font-size: 18px; line-height: 18px; text-align: center; } #title_bar_login_button:hover #title_bar_login_button_text{ color: var(--primary-text-color-white--); } #mobile_title_bar{ position: relative; display: none; top: 0px; left: 0px; width: 100%; height: 45px; text-align: right; } #mobile_title_bar_text{ position: absolute; display: block; margin-top: 3px; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: auto; height: 100%; font-family: var(--primary-brand-font--); font-size: 28px; line-height: 28px; text-align: right; color: var(--application-titlebar-logo-text-color--); line-height: 40px; text-align: center; cursor: pointer; } #mobile_title_bar_chat_button{ position: absolute; display: none; top: 3px; right: 50px; width: 40px; height: 40px; border-radius: 25px; color: var(--primary-text-color-dark-gray--); background-color: var(--application-title-bar-button-background-color--); cursor: pointer; transition: 0.3s; } #mobile_title_bar_chat_button:active{ background-color: var(--application-title-bar-button-hover-background-color--); transition: 0.3s; } #mobile_title_bar_chat_button_icon{ position: absolute; display: block; top: 5px; left: 5px; width: 30px; height: 30px; background-image:url('assets/images/icons/chat_black.svg'); background-size: 25px 25px; background-repeat: no-repeat; background-position: 3px 3px; } #mobile_title_bar_chat_button_text{ position: absolute; display: none; top: 0px; right: -10px; width: 24px; height: 20px; font-family: var(--primary-font--); font-size: 10px; line-height: 20px; color: var(--primary-text-color-white--); text-align: center; background-color: var(--color-unread-message-green--); border-radius: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #mobile_title_bar_chat_button:active #title_bar_chat_button_icon{ background-image:url('assets/images/icons/chat_white.svg'); } #mobile_title_bar_notifications_button{ position: absolute; display: none; top: 3px; right: 100px; width: 40px; height: 40px; border-radius: 25px; color: var(--primary-text-color-dark-gray--); background-color: var(--application-title-bar-button-background-color--); cursor: pointer; transition: 0.3s; } #mobile_title_bar_notifications_button.NoChatButton{ right: 50px; } #mobile_title_bar_notifications_button:active{ background-color: var(--application-title-bar-button-hover-background-color--); transition: 0.3s; } #mobile_title_bar_notifications_button_icon{ position: absolute; display: block; top: 5px; left: 5px; width: 30px; height: 30px; background-image:url('assets/images/icons/notifications_black.svg'); background-size: contain; background-repeat: no-repeat; background-position: 0px 0px; } #mobile_title_bar_notifications_button:active #title_bar_notifications_button_icon{ background-image:url('assets/images/icons/notifications_white.svg'); } #mobile_title_bar_notifications_button_text{ position: absolute; display: none; top: 0px; right: -10px; width: 24px; height: 20px; font-family: var(--primary-font--); font-size: 10px; line-height: 20px; color: var(--primary-text-color-white--); text-align: center; background-color: var(--color-unread-message-green--); border-radius: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #content_container{ position: relative; display: block; top: 0px; left: 0px; height: calc(100% - 61px); width: 100%; overflow: hidden; /*text-align: left;*/ font-size: 0; background-color: var(--content-container-background-color--); transform: translateZ(0); /* safari fix for drop shadow */ } #views_container{ position: relative; display: inline-block; top: 0px; height: 100%; background-color: var(--views-container-background-color--); vertical-align: top; /* overflow-x: hidden; overflow-y: auto; */ overflow: hidden; border-top-left-radius: var(--views-container-border-radius--); transition: 0.3s; } .views_container_rtl{ border-left: 0px !important; border-top-left-radius: 0px !important; border-top-right-radius: var(--views-container-border-radius--); } .views_container_full_screen{ width: 100%; left: 0px; } .views_container_with_expanded_menu{ width: calc(100% - 200px); } .views_container_with_mini_menu{ width: calc(100% - 100px); } #application_call_view_holder{ position: absolute; display: none; top:0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 1000; } #application_loading_view{ position: absolute; display: none; top:0px; left: 0px; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.8); z-index: 1000; } .loader { position: relative; display: block; top: calc(50% - 26px); left: calc(50% - 26px); width: 50px; height: 50px; border: 3px solid #f3f3f3; /* Light grey */ border-top: 3px solid var(--); /* Red */ border-radius: 50%; animation: spin 2s linear infinite; } #application_alerts_holder{ position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media only screen and (max-width: 900px) { .views_container_with_expanded_menu{ width: calc(100% - 100px); } } @media only screen and (max-width: 780px) { #title_bar{ display: none; } #mobile_title_bar{ display: block; } #content_container{ position: relative; display: block; top: 0px; left: 0px; height: calc(100% - 45px); width: 100%; background-color: var(--content-container-background-color--); overflow: hidden; } #views_container{ position: relative; display: block; top: 0px; left: 0px; height: 100%; width: 100%; border-radius: 0px; overflow-x: hidden; overflow-y: auto; } .views_container_rtl{ border-radius: 0px; } .views_container_with_expanded_menu{ border: 0px; } } /* filename: ../app/css/application/default_document_layout.css */ @charset "utf-8"; /* CSS Document */ html { margin: 0px; padding: 0px; height: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); background-color: #ffffff !important; overflow: hidden !important; overscroll-behavior: none; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0px; padding: 0px; background-color: #ffffff !important; width: 100%; height: 100%; overflow: hidden !important; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* link */ a{ text-decoration: none; color: #303030; cursor: pointer; } /* unvisited link */ a:link { color: #303030; } /* visited link */ a:visited { color: #606060; } /* mouse over link */ a:hover { color: #606060; } /* selected link */ a:active { color: #303030; } .rtl{ direction: rtl; } .ltr{ direction: rtl; } video::-webkit-media-controls { display:none !important; } video { background-color: transparent !important; -webkit-tap-highlight-color: transparent; } @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* filename: ../app/css/application/rtl.css */ .TitleBarMenu_rtl{ left: 10px !important; } .TableItem_rtl{ text-align: right !important; } .MenuItem_rtl{ text-align: right !important; } .SearchBar_rtl{ text-align: right !important; } .Text_rtl{ direction: rtl !important; text-align: right !important; } .rtl{ direction: rtl !important; text-align: right !important; } .ltr{ direction: ltr !important; text-align: left !important; } /* filename: ../app/css/dialogs/CookieManagement/CookieConcentDialog.css */ #CookieConcentDialog { position: absolute; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); overflow: hidden; } /* filename: ../app/css/dialogs/ShareSettings/ShareSettingsDialog.css */ .ShareSettingsDialogHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .ShareSettingsDialogInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; max-width: 800px; height: calc(100% - 53px); container-name: ShareSettingsDialogInnerHolder; container-type: inline-size; } .ShareSettingsDialogHolder .TitleBar { position: relative; display: block; top: 0px; left: 0px; margin-top: 0px; margin-bottom: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } .ShareSettingsDialogHolder .TitleBar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .ShareSettingsDialogHolder .TitleBar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; } .ShareSettingsDialogHolder .TitleBar .CloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; /*background-color: var(--color-white--);*/ transition: 0.1s; vertical-align: middle; /*border: 2px var(--color-black--) solid;*/ overflow: hidden; cursor: pointer; transition: 0.2s; } .ShareSettingsDialogHolder .TitleBar .CloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } .ShareSettingsDialogHolder .ShareDialog{ position: relative; display: block; margin: 0 auto; margin-top: 5px; padding: 20px; width: calc(100% - 40px); max-width: 660px; height: calc(100% - 50px); background-color: var(--color-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); overflow-x: hidden; overflow-y: auto; } .ShareSettingsDialogHolder .ShareDialog .Title { position: relative; display: inline-block; margin: 0 auto; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 120px); height: 40px; font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; font-weight: 600; white-space: nowrap; color: var(--primary-text-color-dark-gray--); vertical-align: top; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } .ShareSettingsDialogHolder .ShareDialog .CloseButton{ position: relative; display: inline-block; width: 100px; height: 32px; margin: 0 auto; margin-top: -5px; padding: 0px; vertical-align: top; text-align: center; background-color: var(--color-lighter-gray--); border-radius: 15px; overflow: hidden; cursor: pointer; transition: 0.2s; } .ShareSettingsDialogHolder .ShareDialog .CloseButton:active{ background-color: var(--primary-brand-color-dark-blue--); } .ShareSettingsDialogHolder .ShareDialog .CloseButton .Icon { position: relative; display: inline-block; width: 26px; height: 32px; margin: 0 auto; padding: 0px; background-position: 5px 6px; background-repeat: no-repeat; background-image: url(/assets/images/icons/close_black.svg); background-size: 20px 20px; vertical-align: top; } .ShareSettingsDialogHolder .ShareDialog .CloseButton .Title { position: relative; display: inline-block; width: auto; height: 32px; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; font-size: 16px; line-height: 32px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; vertical-align: top; overflow: hidden; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder { position: relative; display: block; margin: 0 auto; margin-top: 20px; padding: 10px; width: calc(100% - 20px); height: auto; min-height: 100px; overflow: hidden; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .ShareTableTitle { position: relative; display: inline-block; margin: 0 auto; margin-bottom: 5px; padding: 10px; width: calc(100% - 100px); height: 20px; font-size: 18px; line-height: 20px; font-weight: bold; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; color: var(--primary-text-color-dark-gray--); vertical-align: middle; overflow: hidden; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .AddButton { position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; padding-right: 5px; padding-left: 5px; width: 60px; height: 22px; font-family: var(--primary-font--); font-size: 14px; line-height: 22px; text-align: center; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-radius: 15px; overflow: hidden; cursor: pointer; transition: 0.2s; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .ShareTable{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 30px; height: auto; border: 1px var(--color-light-gray--) solid; background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; text-align: inherit; overflow-x: hidden; overflow-y: auto; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .ShareTable .Item{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; overflow: hidden; border-bottom: 1px var(--color-light-gray--) solid; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .ShareTable .Item:last-child{ border-bottom: unset; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .ShareTable .Item .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .ShareTable .Item .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 100px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; text-align: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .ShareTable .Item .Title{ position: relative; display: inline-block; margin: 0 auto; margin-right: 15px; margin-left: 15px; padding: 0px; width: calc(100% - 72px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; font-weight: normal; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .ShareTable .Item .DeleteButton{ position: relative; display: inline-block; margin: 0px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 5px 5px; background-repeat: no-repeat; background-image: url(/assets/images/icons/delete_black.svg); background-size: 20px 20px; border-radius: 15px; cursor: pointer; transition: 0.2s; } .ShareSettingsDialogHolder .SharePickerDialogContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; } @container ShareSettingsDialogInnerHolder (width < 800px) { .ShareSettingsDialogHolder .ShareSettingsDialogInnerHolder .ShareDialog{ margin-top: 0px; padding: 10px; height: 100%; width: calc(100% - 20px); max-width: unset; } } @media only screen and (max-width: 780px){ .ShareSettingsDialogHolder .ShareDialog .Title{ width: calc(100% - 20px); } .ShareSettingsDialogHolder .ShareDialog .CloseButton{ display: none; } } @media only screen and (hover: hover) and (min-width: 781px){ .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .AddButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } .ShareSettingsDialogHolder .ShareDialog .ShareTableHolder .ShareTable .Item .DeleteButton:hover{ background-color: var(--color-light-gray--); } .ShareSettingsDialogHolder .ShareDialog .CloseButton:hover{ background-color: var(--primary-brand-color-blue--); } .ShareSettingsDialogHolder .ShareDialog .CloseButton:hover .Title{ color: var(--color-white--); } .ShareSettingsDialogHolder .ShareDialog .CloseButton:hover .Icon{ background-image: url(/assets/images/icons/close_white.svg); } } /* filename: ../app/css/dialogs/Alert/Alert.css */ .AlertView{ position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index:1000; } .AlertPanel{ position: absolute; display: block; top: calc(50% - 100px); left: calc(50% - 158px); width: 300px; min-height: 150px; height: auto; margin: 0px; padding: 8px; background-color: var(--color-white--); border: 1px #000000 solid; border-radius: 30px; overflow: hidden; } .AlertPanel .Title{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 20px; line-height: 42px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-top-left-radius: 20px; border-top-right-radius: 20px; overflow: hidden; } .AlertPanel .Body{ position: relative; display: block; margin: 10px; padding-top: 10px; padding-bottom: 10px; top: 0px; left: 0px; width: calc(100% - 20px); min-height: 50px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: center; unicode-bidi: plaintext; word-wrap: break-word; color: var(--primary-text-color-gray--); background-color: var(--color-white--); overflow: hidden; } .AlertPanel .ButtonsHolder{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 40px; background-color: var(--color-hite--); border-top: 1px var(--color-light-blue--) solid; overflow: hidden; } .AlertPanel .SingleButton{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: center; unicode-bidi: plaintext; color: var(--primary-text-color-gray--); background-color: var(--color-white--); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; overflow: hidden; cursor: pointer; } .AlertPanel .SingleButton:hover{ color: var(--color-white--); background-color: var(--primary-brand-color-blue--); } .AlertPanel .Button1{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(50% - 1px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; unicode-bidi: plaintext; color: var(--primary-text-color-gray--); background-color: var(--color-white--); border-right: 1px var(--color-light-blue--) solid; border-bottom-left-radius: 20px; overflow: hidden; cursor: pointer; transition: 0.3s; } .AlertPanel .Button1:hover{ background-color: var(--primary-brand-color-blue--); color: var(--color-white--); } .AlertPanel .Button2{ position: relative; display: inline-block; top: 0px; left: 0px; width: 50%; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; unicode-bidi: plaintext; color: var(--primary-text-color-gray--); background-color: var(--color-white--); border-bottom-right-radius: 20px; overflow: hidden; cursor: pointer; transition: 0.3s; } .AlertPanel .Button2:hover{ background-color: var(--primary-brand-color-blue--); color: var(--color-white--); } /* filename: ../app/css/dialogs/ShiftManagement/ShiftSelectionDialog.css */ .ShiftSelectionDialog{ position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index:1000; } .ShiftSelectionDialog .Dialog{ position: absolute; display: block; margin: 0; top: 50%; left: calc(50% - 158px); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 300px; min-height: 150px; height: auto; margin: 0px; padding: 8px; background-color: #ffffff; border: 1px #000000 solid; border-radius: 30px; overflow: hidden; } .ShiftSelectionDialog .Dialog .Title{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 20px; line-height: 42px; text-align: center; unicode-bidi: plaintext; color: #ffffff; background-color: var(--primary-brand-color-blue--); border-top-left-radius: 20px; border-top-right-radius: 20px; overflow: hidden; } .ShiftSelectionDialog .Dialog .Info{ position: relative; display: block; margin: 10px; padding-top: 10px; padding-bottom: 8px; top: 0px; left: 0px; width: calc(100% - 20px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: center; unicode-bidi: plaintext; word-wrap: break-word; color: #000000; background-color: #ffffff; overflow: hidden; } .ShiftSelectionDialog .Dialog .PositionMenu{ position: relative; display: block; margin: 10px; margin-left: 15px; margin-bottom: 0px; top: 0px; left: 0px; width: calc(100% - 28px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; unicode-bidi: plaintext; word-wrap: break-word; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px var(--color-white--) solid; cursor: pointer; } .ShiftSelectionDialog .Dialog .PositionMenuHolder{ position: relative; display: block; margin-left: 15px; top: 0px; left: 0px; width: calc(100% - 30px); height: auto; min-height: 30px; background-color: var(--color-white--); border: 1px var(--color-light-blue--) solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .ShiftSelectionDialog .Dialog .PositionMenuItem{ position: relative; display: block; margin: 0px; padding-left: 20px; top: 0px; left: 0px; text-align: start; unicode-bidi: plaintext; height: 40px; width: calc(100% - 20px); font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: left; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; border-bottom: 1px var(--color-light-blue--) solid; cursor: pointer; overflow: hidden; transition: 0.2s linear; } .ShiftSelectionDialog .Dialog .PositionMenuItem:hover{ background-color: var(--color-lighter-gray--); } .ShiftSelectionDialog .Dialog .PositionMenuItem:last-child{ border-bottom: none; } .ShiftSelectionDialog .Dialog .PositionMenuItemSelected{ position: relative; display: block; margin: 0px; padding-left: 20px; top: 0px; left: 0px; text-align: left; height: 40px; width: calc(100% - 20px); font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; background-color: var(--color-menu-button-selected-blue--); border-bottom: 1px var(--color-light-blue--) solid; cursor: pointer; } .ShiftSelectionDialog .Dialog .PositionMenuItemSelected:last-child{ border-bottom: none; } .ShiftSelectionDialog .Dialog .ButtonsHolder{ position: relative; display: block; margin-top: 22px; top: 0px; left: 0px; width: 100%; height: 40px; background-color: #ffffff; border-top: 1px var(--color-light-blue--) solid; overflow: hidden; } .ShiftSelectionDialog .Dialog .Button1{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(50% - 1px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; unicode-bidi: plaintext; color: #000000; background-color: #ffffff; border-right: 1px var(--color-light-blue--) solid; border-bottom-left-radius: 20px; overflow: hidden; cursor: pointer; transition: 0.3s; } .ShiftSelectionDialog .Dialog .Button1:hover{ background-color: var(--primary-brand-color-blue--); color: #ffffff; } .ShiftSelectionDialog .Dialog .Button2{ position: relative; display: inline-block; top: 0px; left: 0px; width: 50%; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; unicode-bidi: plaintext; color: #000000; background-color: #ffffff; border-bottom-right-radius: 20px; overflow: hidden; cursor: pointer; transition: 0.3s; } .ShiftSelectionDialog .Dialog .Button2:hover{ background-color: var(--primary-brand-color-blue--); color: #ffffff; } /* filename: ../app/css/dialogs/SharePicker/SharePickerDialog.css */ .SharePickerDialogHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .SharePickerDialogHolder .SharePickerDialogInnerHolder{ position: relative; display: block; margin: 0 auto; top: 15%; padding: 0px; width: 100%; max-width: 800px; height: calc(70% - 53px); } .SharePickerDialogHolder .TitleBar { position: relative; display: block; top: 0px; left: 0px; margin-top: 0px; margin-bottom: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } .SharePickerDialogHolder .TitleBar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .SharePickerDialogHolder .TitleBar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; } .SharePickerDialogHolder .TitleBar .CloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; /*background-color: var(--color-white--);*/ transition: 0.1s; vertical-align: middle; /*border: 2px var(--color-black--) solid;*/ overflow: hidden; cursor: pointer; } .SharePickerDialogHolder .TitleBar .CloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 340px; height: 100%; overflow: hidden; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .SearchBar{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 4px); height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border: 2px var(--color-white--) solid; overflow: hidden; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .SearchBar .ItemListIcon{ position: relative; display: inline-block; margin: 5px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-image: url('/assets/images/icons/user_white.svg'); background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .SearchBar .ItemListTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 210px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; vertical-align: middle; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); text-overflow: ellipsis; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .SearchBar .SearchField{ position: relative; display: inline-block; margin: 0px; margin-right: 5px; padding: 0px; top: 0px; left: 0px; width: 160px; height: 46px; vertical-align: middle; overflow: hidden; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .SearchBar .SearchField .SearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 7px; left: 15px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .SearchBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 10px; right: 4px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--primary-brand-color-light-blue--); cursor: pointer; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .SearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--primary-brand-color-blue--); } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .SearchBar .SearchField input[type=text]{ position: absolute; display: block; margin: 0 auto; margin-left: 10px; margin-right: 10px; padding: 0px; padding-left: 35px; padding-right: 38px; top: 5px; left: 0px; width: calc(100% - 10px); height: 36px; box-sizing: border-box; font-size: 16px; line-height: 37px; text-align: start; unicode-bidi: plaintext; border: none; background-color: var(--color-white--); border-bottom: 1px solid #e0e0e0; border-radius: 18px; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .SearchBar .SearchField input[type=text]:focus{ outline: none; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder{ position: relative; display: block; width: calc(100% - 2px); height: calc(100% - 112px); overflow-x: hidden; overflow-y: auto; background-color: var(--color-white--); border: 2px var(--color-white--) solid; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem{ position: relative; display: block; width: calc(100% - 4px); height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; cursor: pointer; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .EmptyListItem{ position: relative; display: block; width: calc(100% - 4px); height: 50px; text-align: left; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--color-dark-gray--); border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; cursor: pointer; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem:active{ background-color: var(--color-lighter-gray--); } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem:first-child{ border-top: 1px var(--color-light-gray--) solid; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem .CheckboxHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 50px; height: 50px; text-align: center; vertical-align: middle; pointer-events: none; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem .CheckboxHolder .Checkbox{ position: relative; display: inline-block; margin: 0 auto; margin-top: 18px; padding: 0px; cursor: pointer; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem .ProfilePicture{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: 0px 0px; background-size: 40px 40px; vertical-align: middle; border-radius: 25px; border: 2px var(--color-white--) solid; overflow: hidden; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem .ItemName{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: calc(100% - 125px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem .ItemName_rtl{ text-align: right; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem .ItemTitle{ position: relative; display: inline-block; width: calc(100% - 52px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem .ItemTitle_rtl{ text-align: right; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ButtonsHolder{ position: relative; display: block; margin: 0 auto; padding-bottom: 2px; width: 340px; height: 44px; background-color: var(--color-white--); text-align: center; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ButtonsHolder .Button{ position: relative; display: inline-block; margin-left: 1px; margin-right: 1px; width: calc(50% - 3px); height: 44px; vertical-align: middle; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; background-color: var(--primary-brand-color-blue--); transition: 0.3s; cursor: pointer; } .SharePickerDialogHolder .SharePickerDialogInnerHolder .ButtonsHolder .Button:hover{ background-color: var(--primary-brand-color-dark-blue--); } @media only screen and (hover: hover) and (min-width: 781px){ .SharePickerDialogHolder .SharePickerDialogInnerHolder .ItemListTable .ItemListTableItemsHolder .TableItem:hover{ background-color: var(--color-lighter-gray--); } } /* filename: ../app/css/menus/FormItemsMenu.css */ .FormItemsMenu{ position: absolute; display: block; top: 53px; right: 0px; width: 1px; height: calc(100% - 53px); z-index: 900; } .FormItemsMenu .FormMenuButton{ position: absolute; display: block; margin: 0px; margin-top: 5px; margin-bottom: 0px; margin-right: 0px; padding: 0px; bottom: 5px; right: 5px; width: 46px; height: 46px; background-image: url('/assets/images/icons/add_white.svg'); background-position: 10px 10px; background-size: 26px 26px; background-repeat: no-repeat; background-color: var(--color-button-blue--); border: 2px var(--color-white--) solid; border-radius: 25px; transition: transform 0.2s; cursor: pointer; } .FormItemsMenu .FormMenuButton:active{ background-color: var(--color-button-dark-blue--); } .FormItemsMenu .Selected{ transform: rotate(-45deg) !important; } .FormItemsMenu .FormMenuItemsHolder{ position: absolute; display: none; bottom: 60px; right: 10px; width: 220px; height: auto; max-height: calc(100% - 70px); background-color: var(--color-white--); border: 2px var(--color-light-gray--) solid; border-radius: 10px; filter: drop-shadow(0.5px 0.5px 0.5px rgb(0 0 0 / 0.1)); transform: translateZ(0); overflow-x:hidden; overflow-y: auto; } .FormItemsMenu .Visible{ display: block; } .FormItemsMenu .FormMenuItemsHolder_rtl{ right: 5px; } .FormItemsMenu .FormMenuItemsHolder .FormMenuItem{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; text-align: left; height: 50px; width: 100%; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } .FormItemsMenu .FormMenuItemsHolder .FormMenuItem:last-child{ border-bottom: 0px; } .FormItemsMenu .FormMenuItemsHolder .FormMenuItem:active{ background-color: var(--color-lighter-gray--); } .FormItemsMenu .FormMenuItemsHolder .FormMenuItem .Icon{ position: relative; display: inline-block; top: 0px; margin: 10px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .FormItemsMenu .FormMenuItemsHolder .FormMenuItem .Title { position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-gray-); text-overflow: ellipsis; } @media only screen and (max-width: 780px){ .FormItemsMenu .FormMenuButton{ bottom: 10px; } } @media only screen and (hover: hover) and (min-width: 781px){ .FormItemsMenu .FormMenuItemsHolder .FormMenuItem:hover{ background-color: var(--color-lighter-gray--); } } /* filename: ../app/css/menus/TimePickerMenu.css */ .TimePickerField { position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 120px; height: 40px; border: 1px var(--color-light-gray--) solid; background-color: var(--color-lighter-gray--); border-radius: 10px; cursor: pointer; outline: none; } .TimePickerField:hover{ background-color: var(--color-light-gray--); } /* .TimePickerField:focus .TimePickerFieldTextHolder{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); border-radius: 10px; } */ /* .TimePickerField:focus-within .TimePickerFieldTextHolder{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); border-radius: 10px; } */ .TimePickerFieldTextHolder{ position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; font-family: var(--primary-font--); direction: ltr; box-sizing: border-box; font-size: 16px; line-height: 42px; color: var(--primary-text-color-dark-gray--); } .TimePickerMenu { position:absolute; display: none; margin-bottom: 20px; top: 44px; left: -57px; width: 234px; height: 160px; border: 1px var(--color-lighter-gray--) solid; background-color: var(--color-white--); border-radius: 15px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ text-align: center; z-index: 1000; } .TimePickerMenu .MenuTitle{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left:20px; padding-right:20px; padding-top:15px; padding-bottom:5px; width: calc(100% - 40px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); } .TimePickerMenu .TimePickerMenuHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 70px; overflow: hidden; direction: ltr; } .TimePickerMenu input[type=text] { position: relative; display: inline-block; padding: 5px; margin:5px; top: 0px; left: 0px; width: 50px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; vertical-align: middle; outline:none; } .TimePickerMenu input[type=text]:focus{ border: 2px var(--primary-brand-color-blue--) solid; } .TimePickerMenu .Space{ position: relative; display: inline-block; padding: 0px; margin:0px; top: 0px; left: 0px; width: 10px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); vertical-align: middle; } .TimePickerMenu .AmPmHolder{ position: relative; display: inline-block; margin:5px; top: 0px; left: 0px; width: 50px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); border: 1px var(--primary-brand-color-blue--) solid; overflow: hidden; vertical-align: middle; } .TimePickerMenu .AmPmHolder .Button{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 25px; font-family: var(--primary-font--); font-size: 16px; line-height: 25px; text-align: center; color: var(--primary-text-color-dark-gray--); } .TimePickerMenu .AmPmHolder .Selected{ background-color: var(--primary-brand-color-blue--); } .TimePickerMenu .ButtonsHolder .ButtonsSpace{ position: relative; display: inline-block; width: calc(100% - 160px); height: 25px; vertical-align: middle; } .TimePickerMenu .ButtonsHolder .Button{ position: relative; display: inline-block; top: 0px; left: 0px; width: 80px; height: 25px; font-family: var(--primary-font--); font-size: 16px; line-height: 25px; text-align: center; color: var(--primary-brand-color-blue--); vertical-align: middle; } .TimePickerMenu .ButtonsHolder .Button:active{ } .TimePickerMenu .ButtonsHolder .Button:hover{ } .TimePickerMenu input[type=text]:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .TimePickerMenu input[type=text]:active{ border: 2px var(--primary-brand-color-blue--) solid; } /* filename: ../app/css/menus/MiniCalendar.css */ .MiniCalendarHolder { position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 270px; text-align: center; } .MiniCalendarHolder .MiniCalendar{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 12px; padding-right: 12px; top: 0px; left: 0px; width: 224px; height: 256px; text-align: start; background-color: var(--color-scheme-gray-l0--); border-radius: 5px; } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; overflow: hidden; } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .Text{ position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 92px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); vertical-align: middle; border-bottom: 1px var(--color-scheme-gray-l1--) solid; } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 72px; height: 40px; vertical-align: middle; } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .LeftButton{ position: relative; display: inline-block; margin: 0 auto; margin-top: 8px; padding: 0px; width: 24px; height: 24px; background-image: url('/assets/images/icons/arrow_left_black.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: -1px 0px; vertical-align: middle; border-radius: 15px; overflow: hidden; cursor: pointer; } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .LeftButton:active{ background-color: var(--color-scheme-gray-l2--); } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .LeftButton_rtl{ background-image: url('/assets/images/icons/arrow_right_black.svg') !important; } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .HomeButton{ position: relative; display: inline-block; margin: 0 auto; margin-top: 8px; padding: 0px; width: 24px; height: 24px; background-image: url('/assets/images/icons/date_today_black.svg'); background-size: 20px 20px; background-repeat: no-repeat; background-position: 2px 2px; vertical-align: middle; border-radius: 3px; overflow: hidden; cursor: pointer; } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .HomeButton:active{ background-color: var(--color-scheme-gray-l2--); } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .RightButton{ position: relative; display: inline-block; margin: 0 auto; margin-top: 8px; padding: 0px; width: 24px; height: 24px; background-image: url('/assets/images/icons/arrow_right_black.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 1px 0px; vertical-align: middle; border-radius: 15px; overflow: hidden; cursor: pointer; } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .RightButton:active{ background-color: var(--color-scheme-gray-l2--); } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .RightButton_rtl{ background-image: url('/assets/images/icons/arrow_left_black.svg') !important; } .MiniCalendarHolder .MiniCalendar .CalendarTitleItem{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 32px; height: 32px; font-family: var(--primary-font--); font-size: 12px; line-height: 32px; text-align: center; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; vertical-align: top; } .MiniCalendarHolder .MiniCalendar .CalendarItem{ position: relative; display: inline-block; margin: 2px; padding: 0px; top: 0px; left: 0px; width: 24px; height: 24px; font-family: var(--primary-font--); font-size: 12px; line-height: 24px; text-align: center; color: var(--primary-text-color-dark-gray--); vertical-align: top; border-radius: 15px; transition: 0.1s linear; border: 2px rgba(0,0,0,0) solid; cursor: pointer; } .MiniCalendarHolder .MiniCalendar .CalendarItem.CurrentDate{ color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border: 2px var(--primary-brand-color-blue--) solid; } .MiniCalendarHolder .MiniCalendar .CalendarItem.CalendarItemSelected{ border: 2px var(--color-scheme-blue-l6--) solid; background-color: var(--color-scheme-blue-l6--); color: var(--primary-text-color-dark-gray--) !important; } .MiniCalendarHolder .MiniCalendar .OutOfMonthCalendarItem{ position: relative; display: inline-block; margin: 2px; padding: 0px; top: 0px; left: 0px; width: 28px; height: 28px; font-family: var(--primary-font--); font-size: 14px; line-height: 28px; text-align: center; color: var(--primary-text-color-dark-gray--); vertical-align: top; } @media only screen and (hover: hover) and (min-width: 781px){ .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .LeftButton:hover{ background-color: var(--color-scheme-gray-l1--); } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .HomeButton:hover{ background-color: var(--color-scheme-gray-l1--); } .MiniCalendarHolder .MiniCalendar .MiniCalendarHeader .ButtonsHolder .RightButton:hover{ background-color: var(--color-scheme-gray-l1--); } } /* filename: ../app/css/menus/EmojiMenu.css */ .EmojoiMenuHolder{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 2px); height: calc(100% - 2px); background-color: #ffffff; border-radius: 10px; border: 1px var(--color-light-gray--) solid; overflow: hidden; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } .EmojoiMenuHolder_rtl{ text-align: right; direction: rtl; } .EmojiMenuRecentItemsHolder{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 30px; background-color: #ffffff; overflow: hidden; } .EmojiMenuItemsHolder{ position: absolute; display: block; margin: 0px; margin-top: 5px; padding: 0px 10px 0px 10px; top: 0px; left: 0px; width: calc(100% - 20px); height: calc(100% - 50px); background-color: #ffffff; overflow-x: hidden; overflow-y: auto; } .EmojoiMenuTitleItem:first-child{ margin: 0px 0px 0px 5px; } .EmojoiMenuTitleItem{ position: relative; display: block; margin: 5px 5px 0px 5px; top: 0px; left: 0px; width: calc(100% - 10px); height: 30px; font-family: var(--primary-font--); text-align: start; unicode-bidi: plaintext; font-size: 14px; line-height: 30px; font-weight: bold; color: var(--primary-text-color-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmojoiMenuItem{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; font-size: 22px; line-height: 34px; text-align: center; overflow: hidden; cursor: pointer; border-radius: 5px; } .EmojoiMenuItem:hover{ font-size: 26px; background-color: var(--color-light-blue--); } .EmojiMenuFooter{ position: absolute; display: block; margin:0px; padding: 0px; bottom: 0px; left: 0px; width: 100%; height: 40px; text-align: center; overflow-x: auto; overflow-y: hidden; border-top: 1px var(--color-light-gray--) solid; } .EmojiMenuFooter .EmojiMenuFooterButton{ position: relative; display: inline-block; margin: 0px; margin-top: 2px; padding: 5px; width: 26px; height: 26px; line-height: 27px; font-size: 20px; text-align: center; overflow: hidden; cursor: pointer; filter: grayscale(100%); vertical-align: middle; border-radius: 20px; transition: 0.3s; } .EmojiMenuFooter .EmojiMenuFooterButton:active{ filter: grayscale(0); } @media only screen and (max-height: 400px) { .EmojoiMenuHolder{ height: 200px !important; } } @media only screen and (hover: hover) and (min-width: 781px){ .EmojiMenuFooter .EmojiMenuFooterButton:hover{ background-color: var(--color-light-blue--); filter: grayscale(0); font-size: 24px; } } /* filename: ../app/css/menus/DatePickerMenu.css */ .DatePickerField { position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 120px; height: 40px; border: 1px var(--color-light-gray--) solid; background-color: var(--color-lighter-gray--); border-radius: 10px; cursor: pointer; outline: none; } .DatePickerFieldDisabled{ pointer-events: none; cursor: default; } .DatePickerField:hover{ background-color: var(--color-light-gray--); } .DatePickerField:focus{ outline: none; } .DatePickerFieldTextHolder{ position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 42px; color: var(--primary-text-color-dark-gray--); } .DatePickerMenu { position:absolute; display: none; margin-bottom: 10px; top: 44px; left: -57px; width: 234px; height: 320px; border: 1px var(--color-lighter-gray--) solid; background-color: var(--color-white--); border-radius: 15px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } .DatePickerField .DatePickerMenu .MonthInput{ position: absolute; display: block; top: 15px; left: 10px; width: 100px; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 32px; text-align: center; color: var(--color-dark-gray--); background-color: #f0f0f0; border: 1px solid #e0e0e0; border-radius: 10px; } .DatePickerField .DatePickerMenu .MonthInput:hover{ background-color: var(--color-light-gray--); } .DatePickerField .DatePickerMenu .YearInput{ position: absolute; display: block; top: 15px; right: 10px; width: 100px; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 32px; text-align: center; color: var(--color-dark-gray--); background-color: #f0f0f0; border: 1px solid #e0e0e0; border-radius: 10px; } .DatePickerField .DatePickerMenu .YearInput:hover{ background-color: var(--color-light-gray--); } .DatePickerField .DatePickerMenu .MonthInputMenu{ position: absolute; display: none; top: 39px; padding-top: 40px; left: -6px; width: 226px; height: 220px; max-height: 240px; text-align: center; overflow-x: hidden; overflow-y: auto; background-color: var(--color-white--); } .DatePickerField .DatePickerMenu .YearInputMenu{ position: absolute; display: none; top: 39px; padding-top: 0px; left: -120px; width: 226px; height: 258px; text-align: center; overflow-x: hidden; overflow-y: auto; background-color: var(--color-white--); } .DatePickerField .DatePickerMenu .InputMenuItem{ position: relative; display: inline-block; margin: 2px; width: 70px; height: 40px; font-family: var(--primary-font--); font-size: 12px; line-height: 40px; text-align: center; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); } .DatePickerField .DatePickerMenu .Selected{ color: var(--color-white--); background-color: var(--primary-brand-color-blue--); } .DatePickerField .DatePickerMenu .InputMenuItem:hover{ background-color: var(--primary-brand-color-blue--); color: var(--color-white--); } .DatePickerMenu .CalendarHolder{ position: relative; display: block; top: 50px; left: 0px; width: 234px; height: 270px; background-color: var(--color-white--); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; overflow: hidden; } .DatePickerMenu .CalendarHolder .Calendar{ position: relative; display: block; margin: 0px; padding: 5px; top: 0px; left: 0px; width: 224px; height: 256px; text-align: start; } .DatePickerMenu .CalendarHolder .Calendar .CalendarTitleItem{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 32px; height: 32px; font-family: var(--primary-font--); font-size: 14px; line-height: 32px; text-align: center; color: var(--color-white--); vertical-align: top; background-color: var(--color-button-blue--); } .DatePickerMenu .CalendarHolder .Calendar .CalendarItem{ position: relative; display: inline-block; margin: 2px; padding: 0px; top: 0px; left: 0px; width: 28px; height: 28px; font-family: var(--primary-font--); font-size: 14px; line-height: 28px; text-align: center; color: var(--primary-text-color-dark-gray--); vertical-align: top; background-color: var(--color-white--); border-radius: 15px; } .DatePickerMenu .CalendarHolder .Calendar .CalendarItemSelected{ position: relative; display: inline-block; margin: 2px; padding: 0px; top: 0px; left: 0px; width: 28px; height: 28px; font-family: var(--primary-font--); font-size: 14px; line-height: 28px; text-align: center; color: var(--color-white--); vertical-align: top; background-color: var(--primary-brand-color-blue--); border-radius: 15px; } .DatePickerMenu .CalendarHolder .Calendar .CalendarItem:hover{ color: var(--color-white--); background-color: var(--color-button-blue--); } .DatePickerMenu .CalendarHolder .Calendar .EmptyCalendarItem{ position: relative; display: inline-block; margin: 2px; padding: 0px; top: 0px; left: 0px; width: 28px; height: 28px; font-family: var(--primary-font--); font-size: 14px; line-height: 28px; text-align: center; color: var(--primary-text-color-dark-gray--); vertical-align: top; } /* filename: ../app/css/menus/mobile_navigation_menu.css */ #mobile_navigation_menu_button{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 7px; right: 7px; width: 30px; height: 30px; background-repeat: no-repeat; background-size: 35px 35px; background-position: -2px -2px; cursor: pointer; } .mobile_navigation_menu_button_menu_open{ background-image: url('assets/images/icons/close_blue.svg'); } .mobile_navigation_menu_button_menu_closed{ background-image: url('assets/images/icons/menu_blue.svg'); } #mobile_navigation_menu{ position: absolute; display: none; margin: 0px; padding: 0px; top: 45px; width: 260px; height: calc(100% - 45px); background-color: var(--mobile-navigation-menu-background-color--); transition: right 0.3s linear; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 1.0)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } .mobile_navigation_menu_overlay{ position: absolute; display: none; margin: 0px; padding: 0px; top: 45px; left: 0px; width: 100%; height: calc(100% - 45px); background-color: rgba(0,0,0,0.5); transition:opacity 0.3s linear; transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; opacity: 0; } .mobile_navigation_menu_visible{ right: 0px; } .mobile_navigation_menu_hidden{ right: -260px; } #mobile_navigation_menu #mobile_navigation_menu_profile_holder{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 165px; width: 100%; background-color: var(--desktop-navigation-menu-top-bar-background-color--); border-bottom: 1px var(--mobile-navigation-menu-border-color--) solid; } #mobile_navigation_menu #mobile_navigation_menu_profile_holder.WithShiftToggleSwitch{ height: 220px; } #mobile_navigation_menu #mobile_navigation_menu_profile_holder #mobile_navigation_menu_profile_picture{ position: absolute; display: block; margin: 0px; margin-left: calc(50% - 48px); padding: 0px; top: 11px; left: 0px; height: 94px; width: 94px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; background-color: var(--color-white--); border-radius: 48px; border: 2px var(--color-white--) solid; transition: 0.1s linear; transition-property: height, width, top, margin-left; cursor: pointer; } .profile_picture_small{ margin-left: calc(50% - 43px) !important; top: 8px !important; height: 82px !important; width: 82px !important; border-radius: 45px !important; } #mobile_navigation_menu #mobile_navigation_menu_profile_holder #mobile_navigation_menu_profile_info_holder{ position: absolute; display: block; margin: 0px; margin-top: 50px; padding: 0px; top: 0px; left: 0px; height: calc(100% - 52px); width: 100%; background-color: var(--color-scheme-white--); border-top: 3px var(--desktop-navigation-menu-top-bar-border-color--) solid; } #mobile_navigation_menu_welcome_text_holder{ position: absolute; display: block; top: 67px; left: 10px; padding-left: 10px; padding-right: 10px; height: 46px; width: calc(100% - 40px); font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; color: var(--mobile-navigation-menu-welcome-text-color--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: var(--mobile-navigation-menu-welcome-text-background-color--); /*filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));*/ transition: 0.1s; transform: translateZ(0); /* safari fix for drop shadow */ } #mobile_navigation_menu_shift_info_holder{ position: absolute; display: none; top: 71px; left: 5px; padding-top: 5px; padding-bottom: 5px; width: calc(100% - 10px); height: 30px; text-align: center; border-top-left-radius: 8px; border-top-right-radius: 8px; background: var(--desktop-navigation-menu-shift-info-holder-background-color--); /*filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));*/ transform: translateZ(0); /* safari fix for drop shadow */ } #mobile_navigation_menu_shift_info_start_time{ position: relative; display: inline-block; top: 0px; left: 0px; padding: 0px; margin: 0px; margin-left: 5px; margin-right: 5px; width: calc(50% - 30px); height: 100%; overflow: hidden; transform: translateZ(0); /* safari fix for drop shadow */ } #mobile_navigation_menu_shift_info_elapsed_time{ position: relative; display: inline-block; top: 0px; left: 0px; padding: 0px; margin: 0px; margin-left: 5px; margin-right: 5px; width: calc(50% - 30px); height: 100%; overflow: hidden; transform: translateZ(0); /* safari fix for drop shadow */ } #mobile_navigation_menu_shift_info_start_time_icon{ position: absolute; display: block; top: 2px; left: 2px; width: 26px; height: 26px; background-image:url('assets/images/icons/timer_white.svg'); background-size: contain; background-repeat: no-repeat; background-position: 0px 0px; } #mobile_navigation_menu_shift_info_start_time_text{ position: absolute; display: block; top: 0px; left: 24px; width: calc(100% - 20px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: center; color: var(--primary-text-color-white--); text-overflow: ellipsis; } #mobile_navigation_menu_shift_info_elapsed_time_icon{ position: absolute; display: block; top: 3px; left: 9px; width: 24px; height: 24px; background-image:url('assets/images/icons/hourglass_white.svg'); background-size: contain; background-repeat: no-repeat; background-position: 0px 0px; } #mobile_navigation_menu_shift_info_elapsed_time_text{ position: absolute; display: block; top: 0px; left: 22px; width: calc(100% - 20px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: center; color: var(--primary-text-color-white--); text-overflow: ellipsis; } #mobile_navigation_menu_shift_toggle_switch_holder{ position: absolute; display: block; margin: 0px; padding: 0px; top: 164px; left: 0px; width: 100%; height: auto; text-align: center; background-color: #ffffff; border-top: 1px var(--mobile-navigation-menu-border-color--) solid; } #mobile_navigation_menu_container{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: calc(100% - 168px); width: 100%; overflow-x: hidden; overflow-y: auto; border-top: 1px var(--mobile-navigation-menu-border-color--) solid; } #mobile_navigation_menu_container.WithShiftToggleSwitch{ height: calc(100% - 222px); } .mobile_navigation_menu_item{ position: relative; display: block; margin: 5px; margin-left: 10px; margin-right: 10px; padding: 0px; text-align: left; height: 40px; width: calc(100% - 20px); border-radius: 20px; /*border-bottom: 1px var(--mobile-navigation-menu-border-color--) solid;*/ cursor: pointer; } .mobile_navigation_menu_item_placeholder{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 1px; width: 100%; background-color: var(--mobile-navigation-menu-item-placeholder-background-color--); /* background-color: var(--mobile-navigation-menu-item-placeholder-background-color--); border-bottom: 1px var(--mobile-navigation-menu-border-color--) solid; */ } .mobile_navigation_menu_item_selected{ background-color: var(--mobile-navigation-menu-item-selected-background-color--) !important; } .mobile_navigation_menu_item:active{ background-color: var(--mobile-navigation-menu-item-active-background-color--); } .mobile_navigation_menu_item_icon{ position: relative; display: inline-block; margin-top: 5px; margin-bottom: 5px; margin-right: 10px; margin-left: 10px; padding: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .mobile_navigation_menu_item_title{ position: relative; display: inline-block; margin-top: 5px; margin-bottom: 5px; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-gray-); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .mobile_navigation_menu_version_info{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; text-align: left; height: 10px; width: calc(100% - 20px); font-family: var(--primary-font--); font-size: 10px; line-height: 10px; text-align: center; color: var(--desktop-navigation-menu-item-title-text-color--); text-overflow: ellipsis; border-top: 1px var(--mobile-navigation-menu-item-placeholder-background-color--) solid; cursor: pointer; } @media only screen and (min-width: 781px) { .mobile_navigation_menu_overlay{ display: none !important; } } @media only screen and (max-width: 780px) { #mobile_navigation_menu_button{ display: none; } #mobile_navigation_menu{ display: block; } } /* filename: ../app/css/menus/LanguageMenu.css */ .LanguageMenuButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 100px; height: 50px; vertical-align: middle; text-align: left; direction: ltr; background-color: var(--application-title-bar-button-background-color--); border-radius: 25px; text-align: center; cursor: pointer; transition: 0.3s; } .LanguageMenuButton:hover{ background-color: var(--application-title-bar-button-hover-background-color--); transition: 0.3s; } .LanguageMenuButton .Flag{ position: relative; display: inline-block; margin-top: 10px; margin-left: 15px; width: 34px; height: 24px; background-color: var(--application-title-bar-language-button-flag-background-color--); overflow: hidden; vertical-align: middle; } .LanguageMenuButton .Flag img{ position: relative; display: block; margin: 2px; padding: 0px; width: 30px; height: 20px; overflow: hidden; } .LanguageMenuButton .Initials{ position: relative; display: inline-block; margin-top: 10px; margin-left: 5px; margin-right: 5px; padding-right: 10px; font-family: var(--primary-font--); font-size: 18px; line-height: 18px; text-align: center; color: var(--application-title-bar-language-button-initials-text-color--); vertical-align: middle; } .LanguageMenuButton:hover > .Initials{ color: var(--primary-text-color-white--); } .LanguageMenuButton .Menu{ position: absolute; display: none; top: 56px; left: -5px; padding-right: 5px; padding-left: 5px; width: 100px; height: auto; min-height: 100px; background-color: var(--application-title-bar-language-button-menu-background-color--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); z-index: 1000; } .LanguageMenuButton .Menu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 50px; border-bottom: 1px var(--application-title-bar-language-menu-button-border-color--) solid; background-color: var(--application-title-bar-language-menu-button-background-color--); transition: 0.3s; cursor: pointer; } .LanguageMenuButton .Menu .MenuItem:first-child{ margin-top: 5px; } .LanguageMenuButton .Menu .MenuItem:last-child{ border-bottom: 0px; margin-bottom: 5px; } .LanguageMenuButton .Menu .MenuItem:hover{ background-color: var(--application-title-bar-language-menu-button-hover-background-color--); transition: 0.3s; } .LanguageMenuButton .Menu .MenuItem .Flag{ position: relative; display: inline-block; padding:2px; margin-top: 10px; margin-left: 10px; width: 30px; height: 20px; background-color: var(--application-title-bar-language-button-flag-background-color--); overflow: hidden; vertical-align: middle; } .LanguageMenuButton .Menu .MenuItem .Flag img{ position: relative; display: block; margin: 0px; padding: 0px; width: 30px; height: 20px; overflow: hidden; } .LanguageMenuButton .Menu .MenuItem .Initials{ position: relative; display: inline-block; margin-top: 10px; margin-left: 10px; margin-right: 5px; padding-right: 10px; font-family: var(--primary-font--); font-size: 18px; line-height: 18px; text-align: center; vertical-align: middle; } .LanguageMenuButton .Menu .MenuItem:hover .Initials{ color: var(--primary-text-color-white--); } /* filename: ../app/css/menus/desktop_navigation_menu.css */ #desktop_navigaion_menu{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 100%; vertical-align: middle; transition: 0.3s; background-color: var(--desktop-navigation-menu-background-color--); container-name: desktop-navigation-menu; container-type: inline-size; border-right: 1px var(--desktop-navigation-menu-border-color--) solid; overflow:hidden; } .desktop_navigaion_menu_rtl{ border-right: unset !important; border-left: 1px var(--desktop-navigation-menu-border-color--) solid; } .desktop_navigaion_menu_hide_menu{ width: 0px; display: none !important; } .desktop_navigaion_menu_present_full_menu{ width: 199px; } .desktop_navigaion_menu_present_mini_menu{ width: 99px; } #desktop_navigation_menu_profile_holder{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: auto; width: 100%; container-name: desktop-navigation-menu-profile-holder; container-type: inline-size; } #desktop_navigation_menu_profile_top_bar{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 50px; background-color: var(--desktop-navigation-menu-top-bar-background-color--); border-bottom: 3px var(--desktop-navigation-menu-top-bar-border-color--)solid; width: 100%; } #desktop_navigation_menu_profile_picture{ position: absolute; display: block; margin: 0px; margin-left: calc(50% - 48px); padding: 0px; top: 11px; left: 0px; height: 94px; width: 94px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; background-color: var(--color-white--); border-radius: 48px; border: 2px var(--color-white--) solid; transition: 0.2s linear; transition-delay: 100ms; transition-property: height, width, top, margin-left; cursor: pointer; } .profile_picture_small{ margin-left: calc(50% - 43px) !important; top: 8px !important; height: 82px !important; width: 82px !important; border-radius: 45px !important; } #desktop_navigation_menu_profile_info_holder{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 110px; width: 100%; transition: 0.2s linear; } #desktop_navigation_menu_welcome_text_holder{ position: absolute; display: block; top: 64px; left: 4px; padding-left: 10px; padding-right: 10px; height: 46px; width: calc(100% - 28px); font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; color: var(--desktop-navigation-menu-welcome-text-color--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: var(--desktop-navigation-menu-welcome-text-background-color--); /*filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); */ transition: 0.1s; transform: translateZ(0); /* safari fix for drop shadow */ } #desktop_navigation_menu_shift_info_holder{ position: absolute; display: none; top: 70px; left: 1px; padding-top: 5px; padding-bottom: 5px; width: calc(100% - 2px); height: 30px; text-align: center; border-top-left-radius: 8px; border-top-right-radius: 8px; background: var(--desktop-navigation-menu-shift-info-holder-background-color--); /*filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));*/ transform: translateZ(0); /* safari fix for drop shadow */ } #desktop_navigation_menu_shift_info_start_time{ position: relative; display: inline-block; top: 0px; left: 0px; padding: 0px; margin: 0px; margin-left: 5px; margin-right: 5px; width: calc(50% - 10px); height: 100%; overflow: hidden; transform: translateZ(0); /* safari fix for drop shadow */ } #desktop_navigation_menu_shift_info_elapsed_time{ position: relative; display: inline-block; top: 0px; left: 0px; padding: 0px; margin: 0px; margin-left: 5px; margin-right: 5px; width: calc(50% - 10px); height: 100%; overflow: hidden; transform: translateZ(0); /* safari fix for drop shadow */ } #desktop_navigation_menu_shift_info_start_time_icon{ position: absolute; display: block; top: 3px; left: 2px; width: 24px; height: 24px; background-image:url('assets/images/icons/timer_white.svg'); background-size: contain; background-repeat: no-repeat; background-position: 0px 0px; } #desktop_navigation_menu_shift_info_start_time_text{ position: absolute; display: block; top: 1px; left: 28px; height: 30px; font-family: var(--primary-font--); font-size: 12px; line-height: 30px; text-align: center; color: var(--primary-text-color-white--); text-overflow: ellipsis; } #desktop_navigation_menu_shift_info_elapsed_time_icon{ position: absolute; display: block; top: 4px; left: 3px; width: 22px; height: 22px; background-image:url('assets/images/icons/hourglass_white.svg'); background-size: contain; background-repeat: no-repeat; background-position: 0px 0px; } #desktop_navigation_menu_shift_info_elapsed_time_text{ position: absolute; display: block; top: 1px; left: 26px; height: 30px; font-family: var(--primary-font--); font-size: 12px; line-height: 30px; text-align: center; color: var(--primary-text-color-white--); text-overflow: ellipsis; } #desktop_navigation_menu_shift_toggle_switch_holder{ position: relative; display: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: auto; /*height: 56px;*/ text-align: center; border-top: 1px var(--desktop-navigation-menu-border-color--) solid; } #desktop_navigation_menu_container{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: calc(100% - 220px); width: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-color: var(--desktop-navigation-menu-scrollbar-color--); scrollbar-width: thin; border-top: 1px var(--desktop-navigation-menu-border-color--) solid; } .desktop_navigation_menu_item{ position: relative; display: block; margin: 5px; padding: 0px; text-align: left; height: 40px; width: calc(100% - 10px); border-radius: 20px; transition: 0.2s linear; cursor: pointer; } .desktop_navigation_menu_item_selected{ background-color: var(--desktop-navigation-menu-item-selected-background-color--) !important; } .desktop_navigation_menu_item:hover{ background-color: var(--desktop-navigation-menu-item-hover-background-color--) !important; } .desktop_navigation_menu_item_placeholder{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 1px; width: 100%; background-color: var(--desktop-navigation-menu-item-placeholder-background-color--); } .desktop_navigation_menu_item_icon{ position: relative; display: inline-block; margin-top: 5px; margin-bottom: 5px; margin-right: 10px; margin-left: 10px; padding: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .desktop_navigation_menu_item_title{ position: relative; display: inline-block; margin-top: 5px; margin-bottom: 5px; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--desktop-navigation-menu-item-title-text-color--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; opacity: 1.0; transition: 0.1s linear; } #desktop_navigation_menu_toggle_button{ position: absolute; display: block; margin: 0px; padding: 0px; top: 0px; right: 0px; height: 100px; width: 100%; cursor: pointer; } .desktop_navigation_menu_version_info{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; text-align: left; height: 10px; width: calc(100% - 20px); font-family: var(--primary-font--); font-size: 10px; line-height: 10px; text-align: center; color: var(--desktop-navigation-menu-item-title-text-color--); text-overflow: ellipsis; border-top: 1px var(--desktop-navigation-menu-item-placeholder-background-color--) solid; cursor: pointer; } @container desktop-navigation-menu-profile-holder (width < 196px){ #desktop_navigation_menu_profile_info_holder{ height: 48px; opacity: 0.0; } #desktop_navigation_menu_shift_info_holder{ display: none; } } @container desktop-navigation-menu (width < 196px){ #desktop_navigation_menu_container{ height: calc(100% - 162px); } #desktop_navigation_menu_profile_picture{ margin-left: calc(50% - 43px) !important; top: 8px !important; height: 82px !important; width: 82px !important; border-radius: 45px !important; } .desktop_navigation_menu_welcome_text_holder{ opacity: 0.0; } .desktop_navigation_menu_item{ text-align: center; } .desktop_navigation_menu_item_title{ opacity: 0.0; display: none; } .desktop_navigation_menu_item_icon{ margin-top:5px; } } @media only screen and (max-width: 780px) { #desktop_navigaion_menu{ display: none !important; } } @media only screen and (max-width: 900px) { .desktop_navigaion_menu_present_full_menu{ width: 98px; } #desktop_navigation_menu_welcome_text_holder{ opacity: 0.0; } } /* filename: ../app/css/misc/Soundwave.css */ @keyframes quiet { 25%{ transform: scaleY(1.2); } 50%{ transform: scaleY(.8); } 75%{ transform: scaleY(1.6); } } @keyframes normal { 25%{ transform: scaleY(2); } 50%{ transform: scaleY(.8); } 75%{ transform: scaleY(1.2); } } @keyframes loud { 25%{ transform: scaleY(2); } 50%{ transform: scaleY(.8); } 75%{ transform: scaleY(2.4); } } .waveContainer{ display: flex; justify-content: space-between; margin-top: 10px; height: 10px; --boxSize: 6px; --gutter: 4px; width: calc((var(--boxSize) + var(--gutter)) * 4); } .wave{ transform: scaleY(.4); height: 100%; width: var(--boxSize); background: var(--color-gray--); animation-timing-function: ease-in-out; animation-iteration-count: infinite; border-radius: 10px; } .waveLine{ position: absolute; display: block; top: 14px; left: -10px; height: 2px; width: 60px; background-color: var(--color-gray--); } .play{ animation-duration: 0.8s; } .stop{ animation-duration: 0s; } .w1{ animation-name: quiet; } .w2{ animation-name: normal; } .w3{ animation-name: quiet; } .w4{ animation-name: loud; } .w5{ animation-name: quiet; } /* filename: ../app/css/misc/ToggleSwitch.css */ .ToggleSwitch .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .ToggleSwitch .switch input { opacity: 0; width: 0; height: 0; } .ToggleSwitch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .ToggleSwitch .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } .ToggleSwitch input:checked + .slider { background-color: #2196F3; } .ToggleSwitch input:focus + .slider { box-shadow: 0 0 1px #2196F3; } .ToggleSwitch input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .ToggleSwitch .slider.round { border-radius: 34px; } .ToggleSwitch .slider.round:before { border-radius: 50%; } /* filename: ../app/css/misc/PaperPlane.css */ .paperplane { position: relative; overflow: hidden; margin: 0 auto; padding: 0px; top: calc(50% - 75px); width: 150px; height: 150px; border-radius: 50%; background-color: rgba(144,196,244,0.3); opacity: 1.0; transition: 0.5s; } .plane { position: absolute; left:80px; top:60px; animation: move 4s linear infinite; } @keyframes move { 0% {transform: translateY(0) rotateX(0);} 25% {transform: translateY(-40px) rotateX(40deg);} 50% {transform: rotateX(0) translateY(0);} 75% {transform: rotateX(-40deg) translateY(40px);} 100% {transform: rotateX(0) translateY(0);} } .wingRight { position: absolute; width: 0; height: 0; border-left: 11.5px solid transparent; border-right: 6.5px solid transparent; border-bottom: 57px solid #2f95f5; transform: rotate(61deg); z-index:4; } .bottom { position: relative; width: 0; height: 0; border-left: 6.5px solid transparent; border-right: 6.5px solid transparent; border-bottom: 12.5px solid #676d70; top: 35px; transform: rotate(-5deg); left:-26.5px; z-index:3; } .top { position:absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 15px solid #c1c7c9; top: 32px; transform: rotate(5deg); left:-30px; z-index:1; } .middle { position: absolute; width: 0; height: 0; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-bottom: 67.5px solid #2555df; top: -6.5px; transform: rotate(72deg); left:-3.5px; z-index:2; } .wingLeft { position: absolute; width: 0; height: 0; border-left: 12px solid transparent; border-bottom: 67.5px solid #2f95f5; transform: rotate(78deg) skewY(-35deg); left:-9.5px; z-index:3; top:-15px; } .clouds { position: absolute; top:0px; left:100px; } @keyframes cloud { from{ left:-200px; } to{ left: 200px; } } .cloudOne, .cloudTwo, .cloudThree { position: absolute; width: 50px; height: 25px; background-color: #fff; border-radius:100px 100px 0 0; } .cloudOne { top:10; left:10px; animation: cloud 5s linear infinite reverse; } .cloudTwo { top:30px; left:60px; animation: cloud 4.4s linear infinite reverse; } .cloudThree { top:90px; left:150px; animation: cloud 4s linear infinite reverse; } .cloudOne:before, .cloudTwo:before, .cloudThree:before { content:""; position: absolute; width: 25px; height: 12.5px; background-color: #fff; border-radius:100px 100px 50px 50px; left:-20px; top:12.5px; box-shadow: 65px 0 #fff; } /* filename: ../app/css/misc/ShiftToggleSwitch.css */ .ShiftToggleSwitch{ position: relative; display: inline-block; margin-top: 5px; margin-bottom: 4px; width: 100%; vertical-align: middle; height: 46px; container-name: shift-toggle-switch; container-type: inline-size; } .ShiftToggleSwitch .switch { position: relative; display: inline-block; width: 150px; height: 44px; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ overflow: hidden; } .ShiftToggleSwitch .switch input { opacity: 0; width: 0; height: 0; } .ShiftToggleSwitch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--toggle-switch-background-color--); -webkit-transition: .4s; transition: .4s; border: 1px var(--toggle-switch-border-color--) solid; } .ShiftToggleSwitch .slider:before { position: absolute; content: ""; height: 34px; width: 34px; left: 2px; bottom: 2px; background-color: var(--color-scheme-white--); -webkit-transition: .4s; transition: .4s; } .ShiftToggleSwitch input:checked + .slider { background-color: var(--toggle-switch-background-color--); border: 2px var(--color-white--) solid; } .ShiftToggleSwitch input:focus + .slider { box-shadow: 0 0 1px var(--toggle-switch-background-color--); } .ShiftToggleSwitch input:checked + .slider:before { -webkit-transform: translateX(105px); -ms-transform: translateX(105px); transform: translateX(105px); } /* Rounded sliders */ .ShiftToggleSwitch .slider.round { border-radius: 34px; border: 2px var(--toggle-switch-border-color--) solid; } .ShiftToggleSwitch .slider.round:before { border-radius: 34px; background-image: url('/assets/images/icons/timer_white.svg'); background-repeat: no-repeat; background-size:26px 26px; background-position: 4px 4px; background-color: var(--toggle-switch-background-color--); border: 1px var(--toggle-switch-border-color--) solid; } .ShiftToggleSwitch .Label{ position: absolute; display: block; top: 7px; left: 42px; width: 100px; height: 30px; font-family: var(--primary-font--); font-size: 15px; line-height: 30px; text-align: center; color: var(--primary-text-color-white--); text-overflow: ellipsis; pointer-events: none; } @container shift-toggle-switch (width < 160px){ .ShiftToggleSwitch .Label{ opacity: 0.01; } .ShiftToggleSwitch .switch { width: 90px; } .ShiftToggleSwitch input:checked + .slider:before { -webkit-transform: translateX(46px); -ms-transform: translateX(46px); transform: translateX(46px); } } @media only screen and (hover: hover) and (min-width: 781px){ .ShiftToggleSwitch input:checked + .slider:hover { background-color: var(--toggle-switch-active-hover-background-color--); } .ShiftToggleSwitch input:checked + .slider:hover::before { background-color: var(--toggle-switch-hover-background-color--); } .ShiftToggleSwitch .switch:hover .slider{ background-color: var(--toggle-switch-hover-background-color--); } .ShiftToggleSwitch .switch:hover .Label{ color: var(--color-white--) !important; } } /* filename: ../app/css/models/Maps/LocationAutocompleteInput.css */ .LocationAutocompleteInput { position: relative; display: block; width: 100%; height: auto; margin-bottom: 20px; } .LocationAutocompleteInput .InputHolder { position: relative; display: block; width: 100%; height: 50px; /* Matching the height of your main eventTitleInput */ } .LocationAutocompleteInput .InputHolder input[type=text] { position: relative; display: block; padding: 10px; box-sizing: border-box; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; unicode-bidi: plaintext; background-color: #f0f0f0; /* Matching your custom component background */ color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; outline: none; -webkit-appearance: none; appearance: none; transition: 0.2s; } .LocationAutocompleteInput .InputHolder input[type=text]:focus { border-color: var(--primary-brand-color-blue--); } .LocationAutocompleteInput .InputHolder .Menu { position: absolute; display: none; margin: 0 auto; margin-top: 5px; padding: 0px; width: 100%; max-height: 205px; height: auto; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l1--) solid; border-radius: 10px; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); overflow-x: hidden; overflow-y: auto; z-index: 1200; /* Higher than calendar dropdowns to ensure visibility */ } .LocationAutocompleteInput .InputHolder .Menu .Item { position: relative; display: block; width: calc(100% - 30px); height: 50px; padding-left: 15px; padding-right: 15px; font-family: var(--primary-font--); color: var(--primary-text-color-dark-gray--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; cursor: pointer; } .LocationAutocompleteInput .InputHolder .Menu .Item:last-child { border-bottom: unset; } .LocationAutocompleteInput .InputHolder .Menu .Item.Selected { background-color: var(--color-scheme-gray-l1--); /* Same as your hover color */ outline: none; } @media only screen and (hover: hover) and (min-width: 781px) { .LocationAutocompleteInput .InputHolder .Menu .Item:hover { background-color: var(--color-scheme-gray-l1--); } } /* filename: ../app/css/models/Forms/FormTimePickerInput.css */ .FormTimePickerInput{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; } .FormTimePickerInput:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormTimePickerInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormTimePickerInput .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormTimePickerInput .DeleteButton_rtl{ right: unset; left: 2px; } .FormTimePickerInput .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormTimePickerInput .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormTimePickerInput:hover .DeleteButton{ display: block; } .FormTimePickerInput:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormTimePickerInput .TextInput{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 55px; max-height: 115px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormTimePickerInput [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormTimePickerInput .TextInput:focus{ outline: none; } .FormTimePickerInput .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormTimePickerInput .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormTimePickerInput .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormTimePickerInput .Toolbar .Button:first-child{ border-left: none; } .FormTimePickerInput .TimePickersHolder{ position:relative; display: block; margin: 0px; margin-top: 10px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; left: 0px; width:calc(100% - 20px); height: 50px; overflow:visible; } .FormTimePickerInput .TimePickersHolderSinglePicker{ width: 140px !important; } .FormTimePickerInput .TimePickerHolder{ position:relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width:140px; height: 50px; vertical-align: middle; overflow:visible; } .FormTimePickerInput .TimePickerHolderHidden{ display: none !important; } .FormTimePickerInput .TimePickerSpace{ position:relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width:20px; height: 50px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 18px; line-height: 50px; vertical-align: middle; overflow:visible; } .FormTimePickerInput .TimePickerSpaceHidden{ display: none !important; } .FormTimePickerInput .TimePickerHolder .TimePickerField{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; border-bottom: 1px solid #e0e0e0; background-color: var(--color-lighter-gray--); border-radius: 10px; cursor: pointer; } .FormTimePickerInput .TimePickerHolder .TimePickerField:hover{ background-color: var(--color-light-gray--); } .FormTimePickerInput .TimePickerHolder .TimePickerField:focus{ outline: none; } .FormTimePickerInput .TimePickerHolder .TimePickerField .TimePickerFieldTextHolder { position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; font-family: var(--primary-font--); box-sizing: border-box; font-size: 18px; line-height: 50px; color: var(--primary-text-color-dark-gray--); } .FormTimePickerInput .TimePickerHolder .TimePickerField .TimePickerMenu { top: 54px; left: -45px; margin-bottom: 10px; } .FormTimePickerInput .FormInputAdvancedMenuOptionsMenu{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; border-top: 0px var(--color-lighter-gray--) solid; text-align: start; overflow: hidden; transition: 0.2s; } .FormTimePickerInput:hover .FormInputAdvancedMenuOptionsMenu{ margin-top: 10px; height: 30px; border-top: 1px var(--color-lighter-gray--) solid; } .FormTimePickerInput .FormInputAdvancedMenuOptionsMenu .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; overflow: hidden; cursor: pointer; } .FormTimePickerInput .FormInputAdvancedMenuOptionsMenu .CheckboxSelected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormTimePickerInput .FormInputAdvancedMenuOptionsMenu .CheckboxLabel{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; overflow: hidden; cursor: pointer; } .FormTimePickerInput .FormInputAdvancedMenuOptionsMenu .Space{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; } .FormTimePickerInput .ValidationMessageHolder{ position:relative; display: none; margin: 0 auto; margin-top: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); min-height: 30px; height: auto; max-height: 60px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 20px; color: var(--form-validation-color-red--); text-align: start; unicode-bidi: plaintext; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ } /* filename: ../app/css/models/Forms/FormTextQuestion.css */ .FormTextQuestion{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border-radius: 15px; border: 2px var(--color-white--) solid; transition: 0.5s; overflow: hidden; } .FormTextQuestion:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormTextQuestion .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormTextQuestion .DeleteButton_rtl{ right: unset; left: 2px; } .FormTextQuestion .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormTextQuestion .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormTextQuestion:hover .DeleteButton{ display: block; } .FormTextQuestion:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormTextQuestion .FormTextQuestionInnerHolder{ position: relative; display: block; margin: 0 auto; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 20px); height: auto; background-color: var(--color-lighter-gray--); border-bottom: 1px var(--color-light-gray--) solid; border-radius: 15px; } .FormTextQuestion:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormTextQuestion .TextArea{ position: relative; display: block; width: calc(100% - 20px); min-height: 55px; height: auto; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; /*background-color: #f0f0f0;*/ color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-white--) solid; border-radius: 10px; white-space: pre-wrap; overflow: hidden; } .FormTextQuestion .TextArea:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormTextQuestion .AnswerTextArea{ position: relative; display: block; width: calc(100% - 20px); min-height: 55px; height: auto; max-height: 330px; padding: 12px 20px; margin: 0 auto; margin-top: 10px; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; background-color: var(--color-scheme-white--); color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-light-gray--) solid; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormTextQuestion .AnswerTextArea:focus{ background-color: var(--color-light-gray--); border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormTextQuestion [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormTextQuestion .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormTextQuestion .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormTextQuestion .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormTextQuestion .Toolbar .Button:first-child{ border-left: none; } .FormTextQuestion .FormInputAdvancedMenuOptionsMenu{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; border-top: 0px var(--color-lighter-gray--) solid; text-align: start; overflow: hidden; transition: 0.2s; } .FormTextQuestion:hover .FormInputAdvancedMenuOptionsMenu{ margin-top: 10px; height: 30px; border-top: 1px var(--color-lighter-gray--) solid; } .FormTextQuestion .FormInputAdvancedMenuOptionsMenu .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; overflow: hidden; cursor: pointer; } .FormTextQuestion .FormInputAdvancedMenuOptionsMenu .CheckboxSelected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormTextQuestion .FormInputAdvancedMenuOptionsMenu .CheckboxLabel{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; overflow: hidden; cursor: pointer; } .FormTextQuestion .FormInputAdvancedMenuOptionsMenu .Space{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; } .FormTextQuestion .ValidationMessageHolder{ position:relative; display: none; margin: 0 auto; margin-top: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); min-height: 30px; height: auto; max-height: 60px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 20px; color: var(--form-validation-color-red--); text-align: start; unicode-bidi: plaintext; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ } /* filename: ../app/css/models/Forms/FormTextInput.css */ .FormTextInput{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; overflow: hidden; } .FormTextInput:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormTextInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormTextInput .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormTextInput .DeleteButton_rtl{ right: unset; left: 2px; } .FormTextInput .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormTextInput .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormTextInput:hover .DeleteButton{ display: block; } .FormTextInput:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormTextInput .TextInput{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 55px; max-height: 115px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormTextInput [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormTextInput [contenteditable].TextInput br { display:none; } .FormTextInput [contenteditable].TextInput * { display:inline; white-space:nowrap; } .FormTextInput .TextInput:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormTextInput .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormTextInput .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormTextInput .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormTextInput .Toolbar .Button:first-child{ border-left: none; } @media only screen and (hover: hover) and (min-width: 781px){ } /* filename: ../app/css/models/Forms/FormRatingInput.css */ .FormRatingInput{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; overflow: hidden; } .FormRatingInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormRatingInput:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormRatingInput .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormRatingInput .DeleteButton_rtl{ right: unset; left: 2px; } .FormRatingInput .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormRatingInput .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormRatingInput:hover .DeleteButton{ display: block; } .FormRatingInput:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormRatingInput .TextInput{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 55px; max-height: 115px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormRatingInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormRatingInput [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormRatingInput .TextInput:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormRatingInput .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormRatingInput .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormRatingInput .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormRatingInput .Toolbar .Button:first-child{ border-left: none; } .FormRatingInput .StarsHolder{ position:relative; display: inline-block; margin: 0 auto; margin-top: 10px; padding: 0px; top: 0px; left: 0px; width:250px; height: 40px; vertical-align: middle; overflow:visible; } .FormRatingInput .StarsHolder .Star{ position:relative; display: inline-block; margin: 0 auto; padding: 5px; top: 0px; left: 0px; width:40px; height: 40px; background-repeat: no-repeat; vertical-align: middle; overflow:visible; cursor: pointer; } .FormRatingInput .StarsHolder .Unselected{ background-image: url("/assets/images/icons/star_empty_black.svg"); background-position: 0px 0px; background-size: 40px 40px; } .FormRatingInput .StarsHolder .Selected{ background-image: url("/assets/images/icons/star_full_black.svg"); background-position: 0px 0px; background-size: 40px 40px; } .FormRatingInput .FormInputAdvancedMenuOptionsMenu{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; border-top: 0px var(--color-lighter-gray--) solid; text-align: start; overflow: hidden; transition: 0.2s; } .FormRatingInput:hover .FormInputAdvancedMenuOptionsMenu{ margin-top: 10px; height: 30px; border-top: 1px var(--color-lighter-gray--) solid; } .FormRatingInput .FormInputAdvancedMenuOptionsMenu .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; overflow: hidden; cursor: pointer; } .FormRatingInput .FormInputAdvancedMenuOptionsMenu .CheckboxSelected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormRatingInput .FormInputAdvancedMenuOptionsMenu .CheckboxLabel{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; overflow: hidden; cursor: pointer; } .FormRatingInput .FormInputAdvancedMenuOptionsMenu .Space{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; } .FormRatingInput .ValidationMessageHolder{ position:relative; display: none; margin: 0 auto; margin-top: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); min-height: 30px; height: auto; max-height: 60px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 20px; color: var(--form-validation-color-red--); text-align: start; unicode-bidi: plaintext; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ } /* filename: ../app/css/models/Forms/FormTextArea.css */ .FormTextArea{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; border-radius: 15px; transition: 0.5s; overflow: hidden; } .FormTextArea:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormTextArea:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormTextArea .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormTextArea .DeleteButton_rtl{ right: unset; left: 2px; } .FormTextArea .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormTextArea .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormTextArea:hover .DeleteButton{ display: block; } .FormTextArea:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormTextArea .TextArea{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 115px; max-height: 300px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormTextArea [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormTextArea .TextArea:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormTextArea .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormTextArea .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormTextArea .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormTextArea .Toolbar .Button:first-child{ border-left: none; } @media only screen and (hover: hover) and (min-width: 781px){ } /* filename: ../app/css/models/Forms/FormPhotoUploadInput.css */ .FormPhotoUploadInput{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; overflow: hidden; } .FormPhotoUploadInput:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormPhotoUploadInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormPhotoUploadInput .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormPhotoUploadInput .DeleteButton_rtl{ right: unset; left: 2px; } .FormPhotoUploadInput .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormPhotoUploadInput .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormPhotoUploadInput:hover .DeleteButton{ display: block; } .FormPhotoUploadInput:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormPhotoUploadInput .TextInput{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 55px; max-height: 115px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormPhotoUploadInput [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormPhotoUploadInput .TextInput:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormPhotoUploadInput .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormPhotoUploadInput .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormPhotoUploadInput .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormPhotoUploadInput .Toolbar .Button:first-child{ border-left: none; } .FormPhotoUploadInput .CanvasHolder { position: relative; display: none; margin: 0 auto; padding: 0px; width: calc(100% - 20px); height: auto; max-width: 640px; max-height: 480px; } .FormPhotoUploadInput .CanvasHolder .Canvas{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; border: 1px var(--color-light-gray--) solid; background-color: var(--color-lighter-gray--); border-radius: 15px; overflow: hidden; } .FormPhotoUploadInput .ButtonMenu{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; top: 0px; left: 0px; text-align: center; width: 100%; height: 30px; } .FormPhotoUploadInput .ButtonMenu .ResetButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: 120px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-white--); background-color: var(--color-heavy-gray--); text-overflow: ellipsis; border-radius: 15px; vertical-align: top; overflow: hidden; transition: 0.2s; opacity: 0.0; cursor: pointer; } .FormPhotoUploadInput .ButtonMenu .ResetButton:active{ background-color: var(--color-gray--); } .FormPhotoUploadInput .ButtonMenu .ResetButton_Visible{ opacity: 1.0; } .FormPhotoUploadInput .ButtonMenu .Space{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 300px); height: 30px; vertical-align: top; } .FormPhotoUploadInput .ButtonMenu .UploadButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 120px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-white--); background-color: var(--color-heavy-gray--); text-overflow: ellipsis; border-radius: 15px; vertical-align: top; overflow: hidden; opacity: 1.0; cursor: pointer; } .FormPhotoUploadInput .ButtonMenu .UploadButton:active{ background-color: var(--color-gray--); } .FormPhotoUploadInput .FormInputAdvancedMenuOptionsMenu{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; border-top: 0px var(--color-lighter-gray--) solid; text-align: start; overflow: hidden; transition: 0.2s; } .FormPhotoUploadInput:hover .FormInputAdvancedMenuOptionsMenu{ margin-top: 10px; height: 30px; border-top: 1px var(--color-lighter-gray--) solid; } .FormPhotoUploadInput .FormInputAdvancedMenuOptionsMenu .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; overflow: hidden; cursor: pointer; } .FormPhotoUploadInput .FormInputAdvancedMenuOptionsMenu .CheckboxSelected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormPhotoUploadInput .FormInputAdvancedMenuOptionsMenu .CheckboxLabel{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; overflow: hidden; cursor: pointer; } .FormPhotoUploadInput .FormInputAdvancedMenuOptionsMenu .Space{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; } .FormPhotoUploadInput .ValidationMessageHolder{ position:relative; display: none; margin: 0 auto; margin-top: 15px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); min-height: 20px; height: auto; max-height: 60px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 20px; color: var(--form-validation-color-red--); text-align: start; unicode-bidi: plaintext; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ .FormPhotoUploadInput .UploadButton:hover{ background-color: var(--color-gray--); } .FormPhotoUploadInput .ResetButton:hover{ background-color: var(--color-gray--); } } /* filename: ../app/css/models/Forms/FormSignatureInput.css */ .FormSignatureInput{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; overflow: hidden; outline: none; } .FormSignatureInput:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormSignatureInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormSignatureInput:focus-within{ border: 2px var(--primary-brand-color-blue--) solid; } .FormSignatureInput .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormSignatureInput .DeleteButton_rtl{ right: unset; left: 2px; } .FormSignatureInput .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormSignatureInput .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormSignatureInput:hover .DeleteButton{ display: block; } .FormSignatureInput:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormSignatureInput .TextInput{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 55px; max-height: 115px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormSignatureInput [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormSignatureInput .TextInput:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormSignatureInput .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormSignatureInput .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormSignatureInput .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormSignatureInput .Toolbar .Button:first-child{ border-left: none; } .FormSignatureInput .CanvasHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; width: 100%; height: 162px; overflow: hidden; } .FormSignatureInput .CanvasHolder .Canvas{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 260px; height: 160px; border: 1px var(--color-light-gray--) solid; /*background-color: var(--color-lighter-gray--);*/ background-color: var(--color-scheme-white--); border-radius: 15px; overflow: hidden; } .FormSignatureInput .CanvasHolder .ResetButtonHolder{ position: relative; display: block; margin: 0 auto; margin-left: calc(50% - 125px); margin-right: calc(50% - 125px); padding: 0px; padding-top: 5px; bottom: 42px; right: 0px; text-align: center; width: 250px; height: 30px; border-top: 1px var(--color-gray--) solid; } .FormSignatureInput .ResetButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: 100px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-white--); background-color: var(--color-heavy-gray--); text-overflow: ellipsis; border-radius: 15px; vertical-align: top; overflow: hidden; transition: 0.2s; opacity: 0.0; cursor: pointer; } .FormSignatureInput .ResetButton:active{ background-color: var(--color-gray--); } .FormSignatureInput .ResetButton_Visible{ opacity: 1.0; } .FormSignatureInput .SignatureText{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 130px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-gray--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .FormSignatureInput .FormInputAdvancedMenuOptionsMenu{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; border-top: 0px var(--color-lighter-gray--) solid; text-align: start; overflow: hidden; transition: 0.2s; } .FormSignatureInput:hover .FormInputAdvancedMenuOptionsMenu{ margin-top: 10px; height: 30px; border-top: 1px var(--color-lighter-gray--) solid; } .FormSignatureInput .FormInputAdvancedMenuOptionsMenu .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; overflow: hidden; cursor: pointer; } .FormSignatureInput .FormInputAdvancedMenuOptionsMenu .CheckboxSelected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormSignatureInput .FormInputAdvancedMenuOptionsMenu .CheckboxLabel{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; overflow: hidden; cursor: pointer; } .FormSignatureInput .FormInputAdvancedMenuOptionsMenu .Space{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; } .FormSignatureInput .ValidationMessageHolder{ position:relative; display: none; margin: 0 auto; margin-top: 15px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); min-height: 20px; height: auto; max-height: 60px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 20px; color: var(--form-validation-color-red--); text-align: start; unicode-bidi: plaintext; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ .FormSignatureInput .ResetButton:hover{ background-color: var(--color-gray--); } } /* filename: ../app/css/models/Forms/FormMultiSelectionInput.css */ .FormMultiSelectionInput{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; overflow: hidden; } .FormMultiSelectionInput:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormMultiSelectionInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormMultiSelectionInput .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormMultiSelectionInput .DeleteButton_rtl{ right: unset; left: 2px; } .FormMultiSelectionInput .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormMultiSelectionInput .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormMultiSelectionInput:hover .DeleteButton{ display: block; } .FormMultiSelectionInput:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormMultiSelectionInput .TextInput{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 55px; max-height: 115px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormMultiSelectionInput [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormMultiSelectionInput .TextInput:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormMultiSelectionInput .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormMultiSelectionInput .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormMultiSelectionInput .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormMultiSelectionInput .Toolbar .Button:first-child{ border-left: none; } .FormMultiSelectionInput .OptionsHolder{ position: relative; display: block; margin: 0 auto; margin-top: 5px; padding: 0px; width: calc(100% - 20px); height: auto; min-height: 40px; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; } .FormMultiSelectionInput .OptionsHolder .FormMultiSelectionInputOptionItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 20px); height: auto; min-height: 40px; text-align: start; border-bottom: 1px var(--color-white--) solid; } .FormMultiSelectionInput .OptionsHolder .FormMultiSelectionInputOptionItem:last-child{ border-bottom: 0px; } .FormMultiSelectionInput .OptionsHolder .FormMultiSelectionInputOptionItem .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 6px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: pointer; } .FormMultiSelectionInput .OptionsHolder .FormMultiSelectionInputOptionItem .Selected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormMultiSelectionInput .OptionsHolder .FormMultiSelectionInputOptionItem .Title{ position: relative; display: inline-block; margin: 0 auto; margin-top: 6px; margin-bottom: 2px; margin-left: 5px; margin-right: 5px; padding: 0px; padding-top: 3px; padding-left: 5px; padding-right: 5px; width: calc(100% - 68px); min-height: 30px; height: auto; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 24px; color: var(--primary-text-color-dark-gray--); text-align: start; unicode-bidi: plaintext; outline: none; vertical-align: top; overflow: hidden; cursor: pointer; } .FormMultiSelectionInput .OptionsHolder .FormMultiSelectionInputOptionItem[contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormMultiSelectionInput .OptionsHolder .FormMultiSelectionInputOptionItem .Title:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormMultiSelectionInput .OptionsHolder .FormMultiSelectionInputOptionItem .DeleteButton{ position: relative; display: inline-block; margin: 0 auto; margin-top: 6px; padding: 0px; width: 24px; height: 24px; background-color: var(--color-heavy-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 2px 2px; background-size: 20px 20px; background-repeat: no-repeat; border-radius: 16px; border: 1px var(--color-white--) solid; vertical-align: top; opacity: 0.0; transition: 0.2s; cursor: pointer; } .FormMultiSelectionInput .OptionsHolder .FormMultiSelectionInputOptionItem:hover .DeleteButton{ opacity: 1.0; } .FormMultiSelectionInput .FormInputOptionsMenu{ position: relative; display: block; margin: 0px; margin-top: 5px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; text-align: start; overflow: hidden; transition: 0.2s; } .FormMultiSelectionInput:hover .FormInputOptionsMenu{ height: 30px } .FormMultiSelectionInput .FormInputOptionsMenu .AddOptionButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; max-width: 100%; height: 30px; border-radius: 15px; cursor: pointer; } .FormMultiSelectionInput .FormInputOptionsMenu .AddOptionButton:active{ background-color: var(--color-light-gray--); } .FormMultiSelectionInput .FormInputOptionsMenu .AddOptionButton .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 20px; height: 30px; background-image: url("/assets/images/icons/add_black.svg"); background-position: 0px 5px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; } .FormMultiSelectionInput .FormInputOptionsMenu .AddOptionButton .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-top: 3px; padding-left: 5px; padding-right: 5px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 24px; color: var(--primary-text-color-dark-gray--); text-align: start; unicode-bidi: plaintext; vertical-align: top; overflow: hidden; cursor: pointer; } .FormMultiSelectionInput .FormInputAdvancedMenuOptionsMenu{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; border-top: 0px var(--color-lighter-gray--) solid; text-align: start; overflow: hidden; transition: 0.2s; } .FormMultiSelectionInput:hover .FormInputAdvancedMenuOptionsMenu{ margin-top: 10px; height: 30px; border-top: 1px var(--color-lighter-gray--) solid; } .FormMultiSelectionInput .FormInputAdvancedMenuOptionsMenu .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; overflow: hidden; cursor: pointer; } .FormMultiSelectionInput .FormInputAdvancedMenuOptionsMenu .CheckboxSelected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormMultiSelectionInput .FormInputAdvancedMenuOptionsMenu .CheckboxLabel{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; overflow: hidden; cursor: pointer; } .FormMultiSelectionInput .FormInputAdvancedMenuOptionsMenu .Space{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; } .FormMultiSelectionInput .ValidationMessageHolder{ position:relative; display: none; margin: 0 auto; margin-top: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); min-height: 30px; height: auto; max-height: 60px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 20px; color: var(--form-validation-color-red--); text-align: start; unicode-bidi: plaintext; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ .FormMultiSelectionInput .FormInputOptionsMenu .AddOptionButton:hover{ background-color: var(--color-light-gray--); } } /* filename: ../app/css/models/Forms/FormSingleSelectionInput.css */ .FormSingleSelectionInput{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; overflow: hidden; } .FormSingleSelectionInput:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormSingleSelectionInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormSingleSelectionInput .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormSingleSelectionInput .DeleteButton_rtl{ right: unset; left: 2px; } .FormSingleSelectionInput .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormSingleSelectionInput .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormSingleSelectionInput:hover .DeleteButton{ display: block; } .FormSingleSelectionInput:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormSingleSelectionInput .TextInput{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 55px; max-height: 115px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormSingleSelectionInput [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormSingleSelectionInput .TextInput:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormSingleSelectionInput .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormSingleSelectionInput .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormSingleSelectionInput .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormSingleSelectionInput .Toolbar .Button:first-child{ border-left: none; } .FormSingleSelectionInput .OptionsHolder{ position: relative; display: block; margin: 0 auto; margin-top: 5px; padding: 0px; width: calc(100% - 20px); height: auto; min-height: 40px; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; } .FormSingleSelectionInput .OptionsHolder .FormSingleSelectionInputOptionItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 20px); height: auto; min-height: 40px; text-align: start; border-bottom: 1px var(--color-white--) solid; } .FormSingleSelectionInput .OptionsHolder .FormSingleSelectionInputOptionItem:last-child{ border-bottom: 0px; } .FormSingleSelectionInput .OptionsHolder .FormSingleSelectionInputOptionItem .Radiobutton{ position:relative; display: inline-block; margin: 0 auto; margin-top: 6px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/radio_button_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: pointer; } .FormSingleSelectionInput .OptionsHolder .FormSingleSelectionInputOptionItem .Selected{ background-image: url('/assets/images/icons/radio_button_selected_black.svg'); } .FormSingleSelectionInput .OptionsHolder .FormSingleSelectionInputOptionItem .Title{ position: relative; display: inline-block; margin: 0 auto; margin-top: 6px; margin-bottom: 2px; margin-left: 5px; margin-right: 5px; padding: 0px; padding-top: 3px; padding-left: 5px; padding-right: 5px; width: calc(100% - 68px); min-height: 30px; height: auto; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 24px; color: var(--primary-text-color-dark-gray--); text-align: start; unicode-bidi: plaintext; outline: none; vertical-align: top; overflow: hidden; cursor: pointer; } .FormSingleSelectionInput .OptionsHolder .FormSingleSelectionInputOptionItem[contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormSingleSelectionInput .OptionsHolder .FormSingleSelectionInputOptionItem .Title:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormSingleSelectionInput .OptionsHolder .FormSingleSelectionInputOptionItem .DeleteButton{ position: relative; display: inline-block; margin: 0 auto; margin-top: 6px; padding: 0px; width: 24px; height: 24px; background-color: var(--color-heavy-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 2px 2px; background-size: 20px 20px; background-repeat: no-repeat; border-radius: 16px; border: 1px var(--color-white--) solid; vertical-align: top; opacity: 0.0; transition: 0.2s; cursor: pointer; } .FormSingleSelectionInput .OptionsHolder .FormSingleSelectionInputOptionItem:hover .DeleteButton{ opacity: 1.0; } .FormSingleSelectionInput .FormInputOptionsMenu{ position: relative; display: block; margin: 0px; margin-top: 5px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; text-align: start; overflow: hidden; transition: 0.2s; } .FormSingleSelectionInput:hover .FormInputOptionsMenu{ height: 30px } .FormSingleSelectionInput .FormInputOptionsMenu .AddOptionButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; max-width: 100%; height: 30px; border-radius: 15px; cursor: pointer; } .FormSingleSelectionInput .FormInputOptionsMenu .AddOptionButton:active{ background-color: var(--color-light-gray--); } .FormSingleSelectionInput .FormInputOptionsMenu .AddOptionButton .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 20px; height: 30px; background-image: url("/assets/images/icons/add_black.svg"); background-position: 0px 5px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; } .FormSingleSelectionInput .FormInputOptionsMenu .AddOptionButton .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-top: 3px; padding-left: 5px; padding-right: 5px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 24px; color: var(--primary-text-color-dark-gray--); text-align: start; unicode-bidi: plaintext; vertical-align: top; overflow: hidden; cursor: pointer; } .FormSingleSelectionInput .FormInputAdvancedMenuOptionsMenu{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; border-top: 0px var(--color-lighter-gray--) solid; text-align: start; overflow: hidden; transition: 0.2s; } .FormSingleSelectionInput:hover .FormInputAdvancedMenuOptionsMenu{ margin-top: 10px; height: 30px; border-top: 1px var(--color-lighter-gray--) solid; } .FormSingleSelectionInput .FormInputAdvancedMenuOptionsMenu .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; overflow: hidden; cursor: pointer; } .FormSingleSelectionInput .FormInputAdvancedMenuOptionsMenu .CheckboxSelected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormSingleSelectionInput .FormInputAdvancedMenuOptionsMenu .CheckboxLabel{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; overflow: hidden; cursor: pointer; } .FormSingleSelectionInput .FormInputAdvancedMenuOptionsMenu .Space{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; } .FormSingleSelectionInput .ValidationMessageHolder{ position:relative; display: none; margin: 0 auto; margin-top: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); min-height: 30px; height: auto; max-height: 60px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 20px; color: var(--form-validation-color-red--); text-align: start; unicode-bidi: plaintext; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ .FormSingleSelectionInput .FormInputOptionsMenu .AddOptionButton:hover{ background-color: var(--color-light-gray--); } } /* filename: ../app/css/models/Forms/FormFileUploadInput.css */ .FormFileUploadInput{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; overflow: hidden; } .FormFileUploadInput:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormFileUploadInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormFileUploadInput .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormFileUploadInput .DeleteButton_rtl{ right: unset; left: 2px; } .FormFileUploadInput .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormFileUploadInput .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormFileUploadInput:hover .DeleteButton{ display: block; } .FormFileUploadInput:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormFileUploadInput .TextInput{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 55px; max-height: 115px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormFileUploadInput [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormFileUploadInput .TextInput:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .FormFileUploadInput .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormFileUploadInput .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormFileUploadInput .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormFileUploadInput .Toolbar .Button:first-child{ border-left: none; } .FormFileUploadInput .ButtonMenu{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; top: 0px; left: 0px; text-align: center; width: 100%; height: 30px; } .FormFileUploadInput .ButtonMenu .ResetButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: 120px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-white--); background-color: var(--color-heavy-gray--); text-overflow: ellipsis; border-radius: 15px; vertical-align: top; overflow: hidden; transition: 0.2s; opacity: 0.0; cursor: pointer; } .FormFileUploadInput .ButtonMenu .ResetButton:active{ background-color: var(--color-gray--); } .FormFileUploadInput .ButtonMenu .ResetButton_Visible{ opacity: 1.0; } .FormFileUploadInput .ButtonMenu .Space{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 300px); height: 30px; vertical-align: top; } .FormFileUploadInput .ButtonMenu .UploadButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 120px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-white--); background-color: var(--color-heavy-gray--); text-overflow: ellipsis; border-radius: 15px; vertical-align: top; overflow: hidden; opacity: 1.0; cursor: pointer; } .FormFileUploadInput .ButtonMenu .UploadButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormFileUploadInput .FormInputAdvancedMenuOptionsMenu{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; border-top: 0px var(--color-lighter-gray--) solid; text-align: start; overflow: hidden; transition: 0.2s; } .FormFileUploadInput .FileNameHolder{ position: relative; display: none; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: 100%; height: 30px; text-align: start; } .FormFileUploadInput .FileNameHolder .Icon{ position:relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/file_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; text-align: center; vertical-align: middle; overflow: hidden; } .FormFileUploadInput .FileNameHolder .Filename{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 70px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .FormFileUploadInput:hover .FormInputAdvancedMenuOptionsMenu{ margin-top: 10px; height: 30px; border-top: 1px var(--color-lighter-gray--) solid; } .FormFileUploadInput .FormInputAdvancedMenuOptionsMenu .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; overflow: hidden; cursor: pointer; } .FormFileUploadInput .FormInputAdvancedMenuOptionsMenu .CheckboxSelected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormFileUploadInput .FormInputAdvancedMenuOptionsMenu .CheckboxLabel{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; overflow: hidden; cursor: pointer; } .FormFileUploadInput .FormInputAdvancedMenuOptionsMenu .Space{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; } .FormFileUploadInput .ValidationMessageHolder{ position:relative; display: none; margin: 0 auto; margin-top: 15px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); min-height: 20px; height: auto; max-height: 60px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 20px; color: var(--form-validation-color-red--); text-align: start; unicode-bidi: plaintext; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ .FormFileUploadInput .UploadButton:hover{ background-color: var(--color-gray--); } .FormFileUploadInput .ResetButton:hover{ background-color: var(--color-gray--); } } /* filename: ../app/css/models/Forms/FormDatePickerInput.css */ .FormDatePickerInput{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: auto; background-color: var(--color-form-input-items-background-gray--); border: 2px var(--color-white--) solid; transition: 0.5s; border-radius: 15px; } .FormDatePickerInput:hover{ border: 2px var(--primary-brand-color-blue--) solid; } .FormDatePickerInput:active{ border: 2px var(--primary-brand-color-blue--) solid; } .FormDatePickerInput .DeleteButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 2px; right: 2px; width: 30px; height: 30px; background-color: var(--color-button-gray--); background-image: url("/assets/images/icons/close_white.svg"); background-position: 5px 5px; background-size: 20px 20px; border-radius: 16px; border: 1px var(--color-white--) solid; cursor: pointer; } .FormDatePickerInput .DeleteButton_rtl{ right: unset; left: 2px; } .FormDatePickerInput .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormDatePickerInput .DeleteButton:hover{ background-color: var(--color-button-dark-gray--); } .FormDatePickerInput:hover .DeleteButton{ display: block; } .FormDatePickerInput:hover .DeleteButton:active{ background-color: var(--color-button-dark-gray-active--); } .FormDatePickerInput .TextInput{ position: relative; display: block; width: calc(100% - 20px); height: auto; min-height: 55px; max-height: 115px; padding: 12px 20px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; white-space: pre-wrap; overflow-x: hidden; overflow-y: auto; } .FormDatePickerInput [contenteditable]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } .FormDatePickerInput .TextInput:focus{ outline: none; } .FormDatePickerInput .Toolbar{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: 90px; height: 0px; direction: ltr !important; overflow: hidden; transition: 0.3s; } .FormDatePickerInput .Toolbar .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 30px; height: 30px; background-position: 3px 3px; background-size: 24px 24px; background-repeat: no-repeat; overflow: hidden; vertical-align: middle; /*border-left: 1px var(--color-light-gray--) solid;*/ cursor: pointer; } .FormDatePickerInput .Toolbar .Button:active{ background-color: var(--color-button-blue--); border-radius: 5px; } .FormDatePickerInput .Toolbar .Button:first-child{ border-left: none; } .FormDatePickerInput .DatePickersHolder{ position:relative; display: block; margin: 0px; margin-top: 10px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; left: 0px; width:calc(100% - 20px); height: 50px; overflow:visible; } .FormDatePickerInput .DatePickersHolderSinglePicker{ width: 140px !important; } .FormDatePickerInput .DatePickerHolder{ position:relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width:140px; height: 50px; vertical-align: middle; overflow:visible; } .FormDatePickerInput .DatePickerHolderHidden{ display: none !important; } .FormDatePickerInput .DatePickerSpace{ position:relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width:20px; height: 50px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 18px; line-height: 50px; vertical-align: middle; overflow:visible; } .FormDatePickerInput .DatePickerSpaceHidden{ display: none !important; } .FormDatePickerInput .DatePickerHolder .DatePickerField{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; border-bottom: 1px solid #e0e0e0; background-color: var(--color-lighter-gray--); border-radius: 10px; cursor: pointer; } .FormDatePickerInput .DatePickerHolder .DatePickerField:hover{ background-color: var(--color-light-gray--); } .FormDatePickerInput .DatePickerHolder .DatePickerField:focus{ outline: none; } .FormDatePickerInput .DatePickerHolder .DatePickerField .DatePickerFieldTextHolder { position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; font-family: var(--primary-font--); box-sizing: border-box; font-size: 18px; line-height: 50px; color: var(--primary-text-color-dark-gray--); } .FormDatePickerInput .DatePickerHolder .DatePickerField .DatePickerMenu { top: 54px; left: -48px; margin-bottom: 10px; } .FormDatePickerInput .FormInputAdvancedMenuOptionsMenu{ position: relative; display: block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 0px; border-top: 0px var(--color-lighter-gray--) solid; text-align: start; overflow: hidden; transition: 0.2s; } .FormDatePickerInput:hover .FormInputAdvancedMenuOptionsMenu{ margin-top: 10px; height: 30px; border-top: 1px var(--color-lighter-gray--) solid; } .FormDatePickerInput .FormInputAdvancedMenuOptionsMenu .Checkbox{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/checkbox_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; overflow: hidden; cursor: pointer; } .FormDatePickerInput .FormInputAdvancedMenuOptionsMenu .CheckboxSelected{ background-image: url('/assets/images/icons/checkbox_checked_black.svg'); } .FormDatePickerInput .FormInputAdvancedMenuOptionsMenu .CheckboxLabel{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: auto; height: 30px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; overflow: hidden; cursor: pointer; } .FormDatePickerInput .FormInputAdvancedMenuOptionsMenu .Space{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 30px; height: 30px; } .FormDatePickerInput .ValidationMessageHolder{ position:relative; display: none; margin: 0 auto; margin-top: 15px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); min-height: 20px; height: auto; max-height: 60px; font-family: var(--primary-font--); box-sizing: border-box; font-size: 16px; line-height: 20px; color: var(--form-validation-color-red--); text-align: start; unicode-bidi: plaintext; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ } /* filename: ../app/css/models/UserPicker/UserPickerDialog.css */ .UserPickerDialogHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .UserPickerDialogHolder .UserPickerDialogInnerHolder{ position: relative; display: block; margin: 0 auto; top: 15%; padding: 0px; width: 100%; max-width: 800px; height: calc(70% - 53px); } .UserPickerDialogHolder .TitleBar { position: relative; display: block; top: 0px; left: 0px; margin-top: 0px; margin-bottom: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } .UserPickerDialogHolder .TitleBar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .UserPickerDialogHolder .TitleBar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; } .UserPickerDialogHolder .TitleBar .CloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; /*background-color: var(--color-white--);*/ transition: 0.1s; vertical-align: middle; /*border: 2px var(--color-black--) solid;*/ overflow: hidden; cursor: pointer; } .UserPickerDialogHolder .TitleBar .CloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } /**/ .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 340px; height: 100%; overflow: hidden; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .SearchBar{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 4px); height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border: 2px var(--color-white--) solid; overflow: hidden; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .SearchBar .UserListIcon{ position: relative; display: inline-block; margin: 5px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-image: url('/assets/images/icons/user_white.svg'); background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .SearchBar .UserListTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 210px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; vertical-align: middle; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); text-overflow: ellipsis; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .SearchBar .SearchField{ position: relative; display: inline-block; margin: 0px; margin-right: 5px; padding: 0px; top: 0px; left: 0px; width: 160px; height: 46px; vertical-align: middle; overflow: hidden; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .SearchBar .SearchField .SearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 8px; left: 15px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .SearchBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 10px; right: 4px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--primary-brand-color-light-blue--); cursor: pointer; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .SearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--primary-brand-color-blue--); } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .SearchBar .SearchField input[type=text]{ position: absolute; display: block; margin-left: 10px; margin-right: 10px; padding-left: 35px; padding-right: 38px; top: 5px; left: 0px; width: calc(100% - 10px); height: 36px; box-sizing: border-box; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; border: none; background-color: var(--color-white--); color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 18px; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .SearchBar .SearchField input[type=text]:focus{ outline: none; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder{ position: relative; display: block; width: calc(100% - 2px); height: calc(100% - 112px); overflow-x: hidden; overflow-y: auto; background-color: var(--color-white--); border: 2px var(--color-white--) solid; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .TableItem{ position: relative; display: block; width: calc(100% - 4px); height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; cursor: pointer; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .EmptyListItem{ position: relative; display: block; width: calc(100% - 4px); height: 50px; text-align: left; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--color-dark-gray--); border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; cursor: pointer; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .TableItem:active{ background-color: var(--color-lighter-gray--); } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .TableItem:first-child{ border-top: 1px var(--color-light-gray--) solid; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .TableItem .CheckboxHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 50px; height: 50px; text-align: center; vertical-align: middle; pointer-events: none; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .TableItem .CheckboxHolder .Checkbox{ position: relative; display: inline-block; margin: 0 auto; margin-top: 18px; padding: 0px; vertical-align: middle; cursor: pointer; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .TableItem .ProfilePicture{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: 0px 0px; background-size: 40px 40px; vertical-align: middle; border-radius: 25px; border: 2px var(--color-white--) solid; overflow: hidden; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .TableItem .ItemName{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: calc(100% - 125px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .TableItem .ItemName_rtl{ text-align: right; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .ButtonsHolder{ position: relative; display: block; margin: 0 auto; padding-left: 1px; padding-right: 1px; padding-bottom: 2px; width: 338px; height: 44px; background-color: var(--color-white--); text-align: center; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .ButtonsHolder .Button{ position: relative; display: inline-block; margin-left: 1px; margin-right: 1px; width: calc(50% - 3px); height: 44px; vertical-align: middle; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; background-color: var(--primary-brand-color-blue--); transition: 0.3s; cursor: pointer; } .UserPickerDialogHolder .UserPickerDialogInnerHolder .ButtonsHolder .Button:hover{ background-color: var(--primary-brand-color-dark-blue--); } @media only screen and (hover: hover) and (min-width: 781px){ .UserPickerDialogHolder .UserPickerDialogInnerHolder .UserListTable .UserListTableUsersHolder .TableItem:hover{ background-color: var(--color-lighter-gray--); } } /* filename: ../app/css/models/Chat/ChatMessageItem.css */ .ChatMessageItem{ position: relative; display: block; margin: 0px; padding: 0px; padding-top: 5px; padding-bottom: 5px; top: 0px; left: 0px; width: 100%; min-height: 50px; height: auto; user-select: none; -webkit-user-select: none; /* disable selection/Copy of UIWebView */ -webkit-touch-callout: none; transform: translateZ(0); /* safari fix for gpu acceleration */ } .ChatMessageItem:first-child{ margin-bottom: 10px; } .ChatMessageItem .ChatMessageItemProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; margin-left: 5px; margin-right: 5px; padding: 0px; height: 40px; width: 40px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; vertical-align: top; border-radius: 25px; } .ChatMessageItem .ImageHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; width: auto; height: auto; max-width: 100%; max-height: 100%; overflow: hidden; background-color: aqua; } .ChatMessageItem img{ position: relative; display: block; margin: 0 auto; margin-top: 5px; margin-bottom: 10px; width: auto; height: auto; max-width: 100%; max-height: 100%; overflow: hidden; border-radius: 5px; /*box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 0.2);*/ transition: opacity 0.5s ease-in-out; cursor: pointer; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-select: none; } .ChatMessageItem .ChatMessageItemLeftBubble{ position: relative; display: inline-block; margin: 0px; padding-top: 7px; padding-left: 8px; padding-right: 8px; padding-bottom: 15px; width: calc(100% - 140px); max-width: 360px; height: auto; border-radius: 15px; background-color: #ffffff; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.1)); transform: translateZ(0); /* safari fix for drop shadow */ } .ChatMessageItem .ChatMessageItemRightBubble{ position: relative; display: inline-block; margin: 0px; padding-top: 7px; padding-left: 8px; padding-right: 8px; padding-bottom: 15px; width: calc(100% - 140px); max-width: 360px; height: auto; text-align: left; border-radius: 15px; background-color: var(--color-chat-bubble-green--); filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.1)); } .ChatMessageItem .ChatMessageItemSenderName{ position: relative; display: block; margin: 0px; padding: 0px; padding-left: 5px; padding-right: 5px; top: 0px; left: 0px; max-width: calc(100% - 40px); width: auto; height: 20px; font-family: var(--primary-font--); text-align: left; font-size: 16px; line-height: 20px; color: var(--primary-brand-color-blue--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ChatMessageItem .Selectable{ cursor: pointer; } .ChatMessageItem .ChatMessageItemMessage{ position: relative; display: block; margin: 0px; margin-top: 5px; margin-bottom: 5px; padding: 0px; padding-top: 2px; padding-left: 5px; padding-right: 5px; width: calc(100% - 10px); height: auto; font-family: var(--primary-font--); text-align: start; unicode-bidi: plaintext; font-size: 16px; line-height: 22px; color: var(--primary-text-color-gray--); word-wrap: normal; line-break: auto; cursor: pointer; overflow: hidden; } .ChatMessageItem .ChatMessageItemCall{ position: relative; display: block; margin-bottom: 8px; width: 220px; height: 45px; background-color: rgba(0,0,0,0.05); cursor: pointer; overflow: hidden; border-radius: 10px; } .ChatMessageItem .ChatMessageItemCall .Icon{ position: relative; display: inline-block; padding: 5px; margin: 0px; margin-left: 5px; margin-right: 5px; margin-top: 5px; width: 25px; height: 25px; border-radius: 30px; color: #ffffff; background-size: 25px 25px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-button-green--); vertical-align: middle; border-radius: 20px; cursor: pointer; } .ChatMessageItem .ChatMessageItemCall .Text{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; margin-left: 5px; margin-right: 5px; padding: 0px; width: calc(100% - 65px); max-width: 340px; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: inherit; color: var(--color-light-gray-); text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } .ChatMessageItem .ChatMessageItemLink{ position: relative; display: block; margin: 0px; margin-top: 5px; margin-bottom: 5px; padding: 0px; padding-left: 5px; padding-right: 5px; width: calc(100% - 10px); height: auto; color: var(--primary-text-color-gray--); word-wrap: normal; line-break: anywhere; transition: 0.5s; overflow: hidden; } .ChatMessageItem .ChatMessageItemLink > img{ max-width: 358px; width: auto; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-select: none; } .ChatMessageItem .ChatMessageItemLink a{ position: relative; display: block; padding-top: 10px; width: 100%; /*max-height: 120px;*/ height: auto; font-family: var(--primary-font--); text-align: start; unicode-bidi: plaintext; font-size: 16px; line-height: 20px; word-wrap: normal; line-break: anywhere; color: var(--primary-brand-color-dark-blue--); } .ChatMessageItem .ChatMessageItemLink a:active{ color: var(--primary-text-color-gray--); } .ChatMessageItem .ChatMessageItemLink .Title{ position: relative; display: block; width: 100%; max-height: 120px; height: auto; font-family: var(--primary-font--); text-align: start; unicode-bidi: plaintext; font-size: 16px; line-height: 20px; word-wrap: normal; line-break: auto; } .ChatMessageItem .ChatMessageItemLink .URL{ position: relative; display: block; width: 100%; /*max-height: 120px;*/ height: auto; font-family: var(--primary-font--); text-align: start; unicode-bidi: plaintext; font-size: 16px; line-height: 20px; word-wrap: normal; line-break: anywhere; color: var(--primary-brand-color-dark-blue--); } .ChatMessageItem .ChatMessageItemLink .URL a{ color: var(--primary-brand-color-dark-blue--); } .ChatMessageItem .ChatMessageItemLink .URL a:active{ color: var(--primary-text-color-gray--); } .ChatMessageItem .ChatMessageItemTimeStamp{ position: absolute; display: block; margin: 0px; padding: 0px; bottom: 2px; right: 10px; width: 100px; height: 20px; font-family: var(--primary-font--); text-align: right; font-size: 12px; line-height: 20px; color: var(--color-gray-); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ChatMessageItemSocialMenu{ position: absolute; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-light-gray--); border-radius: 15px; opacity: 0.0; transition: 0.3s; } .ChatMessageItemAudioPlayerHolder{ position: relative; display: block; margin-top: 4px; margin-bottom: 8px; width: 190px; height: 55px; overflow: hidden; background-color: rgba(0, 0, 0, 0.05); border-radius: 10px; } .ChatMessageItemAudioPlayButton{ position: relative; display: inline-block; padding: 5px; margin: 0px; margin-left: calc(50% - 90px); margin-top: 10px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/play_white.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 6px 6px; background-color: var(--color-recorder-button-green--); vertical-align: middle; border-radius: 20px; cursor: pointer; } .ChatMessageItemAudioPlayButton:active{ background-color: var(--color-recorder-button-dark-green--); } .ChatMessageItemAudioStopButton{ position: relaive; display: none; padding: 5px; margin: 0px; margin-left: calc(50% - 90px); margin-top: 10px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/stop_white.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 6px 6px; background-color: var(--color-recorder-button-red--); vertical-align: middle; border-radius: 20px; cursor: pointer; } .ChatMessageItemAudioStopButton:active{ background-color: var(--color-recorder-button-dark-red--); } .ChatMessageItemAudioTimerHolder{ position: absolute; display: block; top: 18px; left: 48px; height: 20px; width: auto; font-family: var(--primary-font--); text-align: center; font-size: 12px; line-height:20px; color: var(--primary-text-color-dark-gray--); overflow: hidden; } .ChatMessageItemAudioTotalTimerHolder{ position: absolute; display: block; top: 18px; left: 150px; height: 20px; width: auto; font-family: var(--primary-font--); text-align: center; font-size: 12px; line-height:20px; color: var(--primary-text-color-dark-gray--); overflow: hidden; } .ChatMessageItemSoundwave{ position: absolute; display: block; top: 13px; left: 94px; height: 30px; width: 60px; } .ChatMessageItem .FileHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 14px; margin-bottom: 8px; padding: 10px; width: calc(100% - 20px); height: 32px; background-color: rgba(0,0,0,0.05); border-radius: 10px; /*border: 1px var(--color-light-gray--) solid;*/ /*box-shadow: 1px 1px 1px rgb(0 0 0 / 0.1);*/ cursor: pointer; } .ChatMessageItem .FileHolder:active{ background-color: var(--color-lighter-gray--); } .ChatMessageItem .FileHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 5px; padding: 0px; padding-left:4px; padding-right:4px; width: 32px; height: 32px; background-position: 0px 0px; background-size: 32px 32px; background-repeat: no-repeat; vertical-align: middle; transition: 0.2s linear; cursor: pointer; } .ChatMessageItem .FileHolder .Icon.PDF{ background-size: 32px 32px; background-image: url('/assets/images/icons/file_pdf_color.svg'); } .ChatMessageItem .FileHolder .Icon.WORD{ background-image: url('/assets/images/icons/word-document.svg'); } .ChatMessageItem .FileHolder .Icon.EXCEL{ background-image: url('/assets/images/icons/excel-document.svg'); } .ChatMessageItem .FileHolder .Icon.POWERPOINT{ background-image: url('/assets/images/icons/ppt-document.svg'); } .ChatMessageItem .FileHolder .Icon.ZIP{ background-image: url('/assets/images/icons/zip-document.svg'); } .ChatMessageItem .FileHolder .Icon.CSV{ background-image: url('/assets/images/icons/csv-document.svg'); } .ChatMessageItem .FileHolder .Icon.TXT{ background-image: url('/assets/images/icons/txt-document.svg'); } .ChatMessageItem .FileHolder .Icon.XML{ background-image: url('/assets/images/icons/xml-document.svg'); } .ChatMessageItem .FileHolder .Icon.AUDIO{ background-image: url('/assets/images/icons/audio-document.svg'); } .ChatMessageItem .FileHolder .Icon.VIDEO{ background-image: url('/assets/images/icons/video-document.svg'); } .ChatMessageItem .FileHolder .Icon.OTHER{ background-image: url('/assets/images/icons/other-document.svg'); } .ChatMessageItem .FileHolder .Name{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: auto; max-width: calc(100% - 40px); height: 32px; font-family: var(--primary-font--); text-align: left; font-size: 14px; line-height:30px; color: var(--primary-text-color-dark-gray--); vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ChatMessageItem .ChatMessageItemForwardIcon{ position: absolute; display: block; margin: 0px; padding: 0px; bottom: 0px; left: 10px; height: 20px; width: 20px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; background-image: url('/assets/images/icons/forward_arrows_black.svg'); background-size: 16px 16px; } .ChatMessageItem .ChatMessageItemForwardLabel{ position: absolute; display: block; margin: 0px; padding: 0px; bottom: 2px; left: 30px; height: 20px; width: auto; min-width: 60px; max-width: 100px; font-family: var(--primary-font--); text-align: left; font-size: 12px; line-height: 19px; color: var(--color-light-gray-); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ChatMessageItem .ChatMessageItemForwardButton{ position: absolute; display: block; margin: 0px; padding: 0px; top: calc(50% - 15px); right: -70px; height: 30px; width: 30px; background-position: 4px 4px; background-repeat: no-repeat; background-size: contain; background-image: url(/assets/images/icons/forward_arrows_white.svg); background-size: 22px 22px; background-color: rgba(0, 0, 0, 0.05); border-radius: 25px; cursor: pointer; transition: 0.2s; opacity: 1.0; } .ChatMessageItem .ChatMessageItemForwardButton:active{ background-image: url('/assets/images/icons/forward_arrows_white.svg'); background-color: var(--primary-brand-color-dark-blue--); } .ChatMessageItem .ChatMessageItemForwardButton_right{ left: -70px; right: unset; } /**/ .ChatMessageItem .ChatMessageItemReactionButton{ position: absolute; display: block; margin: 0px; padding: 0px; top: calc(50% - 15px); right: -35px; height: 30px; width: 30px; background-position: 4px 4px; background-repeat: no-repeat; background-size: contain; background-image: url(/assets/images/icons/add_reaction_white.svg); background-size: 22px 22px; background-color: rgba(0, 0, 0, 0.05); border-radius: 25px; cursor: pointer; transition: 0.2s; opacity: 1.0; } .ChatMessageItem .ChatMessageItemReactionButton:active{ background-image: url('/assets/images/icons/add_reaction_white.svg'); background-color: var(--primary-brand-color-dark-blue--); } .ChatMessageItem .ChatMessageItemReactionButton_right{ left: -35px; right: unset; } .ChatMessageItem .MessageItemEmojiMenuHolder{ position: relative; display: none; margin: 0 auto; margin-top: 1px; margin-left: 10px; padding: 0px; width: 330px; height: 140px; text-align: left; } .ChatMessageItem .MessageItemEmojiMenuHolder_right{ margin-left: calc(100% - 340px); text-align: left; } /**/ .ChatMessageItemSystemMessage{ position: relative; display: block; margin: 0 auto; margin-bottom: 8px; padding: 0px; padding-left: 10px; padding-right: 10px; bottom: 0px; left: 0px; width: calc(100% - 20px); min-height: 30px; height: auto; font-family: var(--primary-font--); text-align: center; font-size: 14px; line-height: 30px; color: var(--color-light-gray-); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background-color: var(--color-white--); cursor: pointer; } .ChatMessageItemHiddenSystemMessage{ position: relative; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 0px; height: 0px; } .ChatMessageItemMenu{ position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); border-radius: 15px; cursor: pointer; } .ChatMessageItemMenu .DeleteButton{ position: absolute; display: block; margin: 0 auto; top: calc(50% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; background-color: var(--color-white--); background-image: url('/assets/images/icons/delete_black.svg'); background-size: 24px 24px; background-position: 8px 8px; background-repeat: no-repeat; border-radius: 20px; cursor: pointer; } .ChatMessageItemMenu .DeleteButton:active{ background-color: var(--color-light-gray--); } .ChatMessageItem .ChatMessageItemDeletedMessage{ position: relative; display: block; margin: 0px; margin-top: 5px; margin-bottom: 5px; padding: 0px; padding-left: 5px; padding-right: 5px; width: calc(100% - 10px); height: auto; font-family: var(--primary-font--); text-align: start; unicode-bidi: plaintext; font-style: italic; font-size: 14px; line-height: 22px; color: var(--primary-text-color-light-gray--); word-wrap: normal; line-break: anywhere; overflow: hidden; } .ChatMessageItem .ReactionsHolder{ position: relative; display: none; margin-top:1px; width: 100%; height: auto; min-height: 24px; } .ChatMessageItem .ReactionsSpace{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 60px; height: 24px; } .ChatMessageItem .ReactionsInnerHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 4px; padding-right: 4px; top:0px; width: auto; min-width: 26px; height: 24px; font-family: var(--primary-font--); text-align: center; font-size: 18px; line-height: 24px; color: var(--color-light-gray-); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background-color: var(--color-scheme-white--); border-radius: 15px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.1)); transform: translateZ(0); cursor: pointer; } .ChatMessageItem .MessageItemExpandedReactionsHolder{ position: relative; display: block; top: -24px; margin: 0 auto; margin-left: 50px; margin-right: 50px; padding: 0px; text-align: left; width: auto; max-width: calc(100% - 100px); } .ChatMessageItem .MessageItemExpandedReactionsHolder_right{ margin-left: calc(100% - 310px); } .ChatMessageItem .MessageItemExpandedReactionsTable{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 260px; height: auto; background-color: var(--color-scheme-white--); border-radius: 15px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.1)); transform: translateZ(0); overflow: hidden; } .ChatMessageItem .MessageItemExpandedReactionsTable .ReactionItem{ position: relative; display: block; top: 0px; left: 0px; margin: 0px; padding: 0px; padding:5px; width: calc(100% - 10px); height: 30px; overflow: hidden; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } .ChatMessageItem .MessageItemExpandedReactionsTable .ReactionItem .TitleText{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; direction: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; overflow: hidden; } .ChatMessageItem .MessageItemExpandedReactionsTable .ReactionItem .CloseButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_black.svg'); background-size: 22px 22px; background-position: 4px 4px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } .ChatMessageItem .MessageItemExpandedReactionsTable .ReactionItem .ProfilePicture { position: relative; display: inline-block; margin: 0px; margin-left: 8px; margin-right: 8px; padding: 0px; height: 28px; width: 28px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 16px; border: 1px var(--color-scheme-white--) solid; } .ChatMessageItem .MessageItemExpandedReactionsTable .ReactionItem .NameHolder { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 78px); height: 30px; vertical-align: middle; overflow: hidden; } .ChatMessageItem .MessageItemExpandedReactionsTable .ReactionItem .Name { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: inherit; direction: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ChatMessageItem .MessageItemExpandedReactionsTable .ReactionItem .NameWithInfo { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 18px; font-family: var(--primary-font--); font-size: 14px; line-height: 16px; text-align: inherit; direction: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ChatMessageItem .MessageItemExpandedReactionsTable .ReactionItem .InfoText { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 10px; font-family: var(--primary-font--); font-size: 12px; line-height: 10px; text-align: inherit; direction: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; } .ChatMessageItem .MessageItemExpandedReactionsTable .ReactionItem .Reaction{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media only screen and (max-width: 780px) { .ChatMessageItem .ChatMessageItemLink > img{ max-width: 100%; width: auto; } } @media only screen and (hover: hover) and (min-width: 781px){ .ChatMessageItem:hover .ChatMessageItemReactiondButton{ opacity: 1.0; } .ChatMessageItem .ChatMessageItemReactionButton:hover{ background-image: url('/assets/images/icons/add_reaction_white.svg'); background-color: var(--primary-brand-color-blue--); } .ChatMessageItem .Selectable:hover{ color: var(--primary-brand-color-dark-blue--); } .ChatMessageItemRightBubble:hover .ChatMessageItemSocialMenu{ opacity: 0.7; } .ChatMessageItemLeftBubble:hover .ChatMessageItemSocialMenu{ opacity: 0.7; } .ChatMessageItem .ChatMessageItemForwardButton:hover{ background-image: url('/assets/images/icons/forward_arrows_white.svg'); background-color: var(--primary-brand-color-blue--); } .ChatMessageItem:hover .ChatMessageItemForwardButton{ opacity: 1.0; } } /* filename: ../app/css/models/Chat/ChatGroupItem.css */ .ChatGroupItem{ position: relative; display: block; padding: 0px; margin: 0px; top: 0px; left: 0px; width: 100%; height: 70px; text-align: left; direction: ltr; border-bottom: 1px var(--color-light-gray--) solid; /*transition: 0.2s linear;*/ cursor: pointer; } .ChatGroupItem_rtl{ text-align: right !important; direction: rtl; } .ChatGroupItemSelected{ background-color: var(--color-light-blue--) !important; } .ChatGroupItem .ChatGroupItemPicture{ position: relative; display: inline-block; margin: 0px; margin-left: 8px; margin-right: 8px; padding: 0px; top: 0px; left: 0px; height: 48px; width: 48px; background-color: var(--color-light-blue--); background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; border: 2px var(--color-superlight-gray--) solid; border-radius: 26px; } .ChatGroupItem .Online{ border: 2px var(--color-button-green--) solid !important; } .ChatGroupItem .ChatGroupItemInfo{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; height: 70px; width: calc(100% - 70px); vertical-align: middle; } .ChatGroupItem .ChatGroupItemInfoLine1{ position: relative; display: block; margin: 0 auto; margin-top: 11px; padding: 0px; top: 0px; left: 0px; height: 20px; width: 100%; } .ChatGroupItem .ChatGroupItemInfoLine2{ position: relative; display: block; margin: 0 auto; margin-top: 5px; margin-bottom: 15px; padding: 0px; top: 0px; left: 0px; height: 20px; width: 100%; } .ChatGroupItem .ChatGroupItemTitle{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(100% - 110px); height: 20px; font-family: var(--primary-font--); text-align: inherit; direction: inherit; font-size: 17px; line-height: 20px; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; } .ChatGroupItem .ChatGroupItemMuteIcon{ position: relative; display: inline-block; margin: 5px; top: 0px; left: 0px; width: 20px; height: 20px; vertical-align: middle; /*background-image: url('/assets/images/icons/notifications_inactive_black.svg');*/ background-size: 16px 16px; background-repeat: no-repeat; background-position: 2px 2px; } .ChatGroupItem .ChatGroupItemText{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(100% - 32px); height: 20px; font-family: var(--primary-font--); text-align: inherit; font-size: 14px; line-height: 20px; color: var(--primary-text-color-gray--); direction: inherit; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; } .ChatGroupItem .ChatGroupItemTextWithUnreadMessages{ width: calc(100% - 75px) !important; } .ChatGroupItem .ChatGroupItemTime{ position: relative; display: inline-block; padding-left: 5px; padding-right: 5px; width: 100px; height: 20px; font-family: var(--primary-font--); text-align: right; font-size: 14px; line-height: 20px; color: var(--primary-text-color-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; } .ChatGroupItem .ChatGroupItemTime_rtl{ text-align: left !important; } .ChatGroupItem .Unread{ color: var(--color-unread-message-green--) !important; } .ChatGroupItem .ChatGroupItemUnreadMessageCount{ position: relative; display: inline-block; top: 0px; right: 0px; padding-left: 5px; padding-right: 5px; width: auto; min-width: 30px; height: 20px; font-family: var(--primary-font--); text-align: center; font-size: 14px; line-height: 20px; color: var(--color-white--); background-color: var(--color-unread-message-green--); border-radius: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; } .EmptyChatGroupItem{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top: 15px; padding-bottom: 15px; top: 0px; left: 0px; width: 100%; height: 24; text-align: center; font-family: var(--primary-font--); text-align: center; font-size: 16px; line-height: 24px; color: var(--primary-text-color-gray--); overflow: hidden; border-bottom: 1px var(--color-light-gray--) solid; } @media only screen and (hover: hover) and (min-width: 781px){ .ChatGroupItem:hover{ background-color: var(--color-lighter-gray--) !important; } } /* filename: ../app/css/models/Mail/EmailAutocompleteInput.css */ .EmailAutocompleteInput{ position: relative; display: inline-block; width: 100%; height: 40px; } .EmailAutocompleteInput .InputHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; min-width: 150px; width: auto; height: 40px; vertical-align: top; } .EmailAutocompleteInput .InputHolder input[type=text] { position: relative; display: inline-block; margin: 0 auto; margin-top: 2px; padding: 0px; padding-left: 4px; padding-right: 4px; width: 142px; height: 26px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; vertical-align: middle; background: transparent; background-color: var(--color-scheme-white--); border-radius: 4px; border: none; outline: none; overflow: hidden; } .EmailAutocompleteInput .InputHolder .Menu{ position: absolute; display: none; margin: 0 auto; margin-top: 2px; padding: 0px; min-width: 100%; max-width: 300px; height: auto; min-height: 30px; background-color: var(--color-scheme-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); overflow-x: hidden; overflow-y: auto; z-index: 100; } .EmailAutocompleteInput .InputHolder .Menu .Item{ position: relative; display: block; width: calc(100% - 20px); height: 32px; padding-left: 10px; padding-right: 10px; font-family: var(--primary-font--); color: var(--primary-text-color-dark-gray--); font-size: 14px; line-height: 32px; text-align: inherit; text-overflow: ellipsis; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; cursor: pointer; } .EmailAutocompleteInput .InputHolder .Menu .Item:last-child{ border-bottom:unset; } .EmailAutocompleteInput .InputHolder .Menu .Item.Selected { background-color: var(--color-scheme-gray-l1--); outline: none; } .EmailAutocompleteInput .EmailItemsHolder{ position: relative; display: inline-block; margin: 0 auto; margin-left: 2px; margin-right: 2px; padding: 0px; width: calc(100% - 154px); height: 30px; vertical-align: top; white-space: nowrap; overflow-y: hidden; overflow-x: auto; /* Hide scrollbar for Chrome, Safari and Opera */ &::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .EmailAutocompleteInput .EmailItemsHolder .EmailItem{ position: relative; display: inline-block; margin: 0 auto; margin-top: 2px; margin-left: 2px; margin-right: 2px; padding: 0px; padding-left: 4px; padding-right: 4px; width: auto; height: 26px; vertical-align: top; background-color: var(--color-scheme-gray-l0--); border-radius: 4px; transition: 0.1s linear; } .EmailAutocompleteInput .EmailItemsHolder .EmailItem .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 2px; padding-right: 2px; width: auto; height: 26px; font-family: var(--primary-font--); color: var(--primary-text-color-dark-gray--); font-size: 14px; line-height: 26px; text-align: inherit; text-overflow: ellipsis; vertical-align: top; } .EmailAutocompleteInput .EmailItemsHolder .EmailItem .DeleteButton{ position: relative; display: inline-block; margin: 3px; padding: 0px; width: 20px; height: 20px; background-image: url('/assets/images/icons/close_black.svg'); background-repeat: no-repeat; background-size: 16px 16px; background-position: 2px 2px; border-radius: 10px; background-color: var(--color-scheme-white--); vertical-align: top; opacity: 0.6; transition: 0.1s linear; cursor: pointer; } @media only screen and (hover: hover) and (min-width: 781px){ .EmailAutocompleteInput .InputHolder .Menu .Item:hover{ background-color: var(--color-scheme-gray-l1--); } .EmailAutocompleteInput .EmailItemsHolder .EmailItem:hover{ background-color: var(--color-scheme-gray-l2--); } .EmailAutocompleteInput .EmailItemsHolder .EmailItem .DeleteButton:hover{ opacity: 1.0; } } /* filename: ../app/css/models/Mail/FolderPicker.css */ .FolderPickerHolder{ position: relative; display: block; margin: 0 auto; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.8); } .FolderPickerHolder .FolderPickerHolderTitlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } .FolderPickerHolder .FolderPickerHolderTitlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .FolderPickerHolder .FolderPickerHolderTitlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; } .FolderPickerHolder .FolderPickerHolderTitlebar .CloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; overflow: hidden; cursor: pointer; } .FolderPickerHolder .FolderPickerHolderTitlebar .CloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } .FolderPickerHolder .FolderPickerInnerHolder{ position: absolute; display: block; margin: 0px; padding: 4px; top: calc(50% - 104px); left: calc(50% - 175px); width: 340px; height: 250px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 18px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.6)); } .FolderPickerHolder .FolderPickerInnerHolder .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--primary-brand-color-blue--); border-top-right-radius: 14px; border-top-left-radius: 14px; overflow: hidden; } .FolderPickerHolder .FolderPickerInnerHolder .Title .BackButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 50px; background-position: 0px 0px; background-repeat: no-repeat; background-size: 30px 50px; background-image: url(/assets/images/icons/arrow_left_white.svg); filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); vertical-align: top; cursor: pointer; overflow: hidden; } .FolderPickerHolder .FolderPickerInnerHolder .Title .BackButton.BackButton_rtl{ background-image: url('/assets/images/icons/arrow_right_white.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Title .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 4px 4px; background-repeat: no-repeat; background-size: 30px 40px; background-image: url('/assets/images/icons/folder-document-yellow.svg'); filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); vertical-align: top; overflow: hidden; } .FolderPickerHolder .FolderPickerInnerHolder .Title .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: inherit; word-wrap: break-word; text-overflow: ellipsis; color: var(--color-white--); vertical-align: top; overflow: hidden; } .FolderPickerHolder .FolderPickerInnerHolder .Body{ position: relative; display: block; margin: 0 auto; top: 0px; left: 0px; width: 100%; height: 155px; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: inherit; word-wrap: break-word; color: var(--primary-text-color-gray--); background-color: var(--color-white--); overflow-x: hidden; overflow-y: auto; } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; cursor: pointer; overflow: hidden; } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 4px 4px; background-repeat: no-repeat; background-size: 30px 40px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); vertical-align: top; overflow: hidden; } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.Image{ position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; margin-left: 5px; margin-right: 5px; padding: 0px; width: 30px; height: 30px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; overflow: hidden; transition: 0.2s linear; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); background-color: var(--color-scheme-black--); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.Folder{ background-image: url('/assets/images/icons/folder-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.PDF{ background-image: url('/assets/images/icons/file_pdf_color.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.WORD{ background-image: url('/assets/images/icons/word-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.EXCEL{ background-image: url('/assets/images/icons/excel-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.POWERPOINT{ background-image: url('/assets/images/icons/ppt-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.ZIP{ background-image: url('/assets/images/icons/zip-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.CSV{ background-image: url('/assets/images/icons/csv-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.TXT{ background-image: url('/assets/images/icons/txt-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.XML{ background-image: url('/assets/images/icons/xml-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.AUDIO{ background-image: url('/assets/images/icons/audio-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.VIDEO{ background-image: url('/assets/images/icons/video-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Icon.OTHER{ background-image: url('/assets/images/icons/other-document.svg'); } .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 10px; width: calc(100% - 60px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: top; overflow: hidden; color: var(--primary-text-color-gray--); } .FolderPickerHolder .FolderPickerInnerHolder .ButtonsHolder{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 44px; text-align: left; direction: ltr; background-color: var(--color-hite--); border-top: 1px var(--color-light-blue--) solid; overflow: hidden; } .FolderPickerHolder .FolderPickerInnerHolder .ButtonsHolder .CancelButton{ position: relative; display: inline-block; top: 0px; left: 0px; margin-right: 2px; width: 100%; height: 44px; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; overflow: hidden; cursor: pointer; transition: 0.3s; } @media only screen and (hover: hover) and (min-width: 781px){ .FolderPickerHolder .FolderPickerInnerHolder .Body .FolderItem:hover{ background-color: var(--color-lighter-gray--); } .FolderPickerHolder .FolderPickerInnerHolder .ButtonsHolder .CancelButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } } /* filename: ../app/css/models/CloudDrive/FilenameEditor.css */ .FilenameEditorHolder{ position: relative; display: block; margin: 0 auto; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.8); } .FilenameEditorHolder .FilenameEditorHolderTitlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } .FilenameEditorHolder .FilenameEditorHolderTitlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .FilenameEditorHolder .FilenameEditorHolderTitlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; } .FilenameEditorHolder .FilenameEditorHolderTitlebar .CloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; overflow: hidden; cursor: pointer; } .FilenameEditorHolder .FilenameEditorHolderTitlebar .CloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } .FilenameEditorHolder .FilenameEditorInnerHolder{ position: absolute; display: block; margin: 0px; padding: 4px; top: calc(50% - 86px); left: calc(50% - 175px); width: 340px; height: 215px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 18px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.6)); overflow: hidden; } .FilenameEditorHolder .FilenameEditorInnerHolder .Title{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 20px; line-height: 50px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-top-right-radius: 14px; border-top-left-radius: 14px; overflow: hidden; } .FilenameEditorHolder .FilenameEditorInnerHolder input[type=text]{ position: relative; display: block; padding: 12px 20px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 0px); height: 50px; box-sizing: border-box; font-size: 18px; line-height: 38px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; } .FilenameEditorHolder .FilenameEditorInnerHolder input[type=text]:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .Counter{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 20px); height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: right; color: var(--primary-brand-color-blue--); overflow: hidden; } .FilenameEditorHolder .FilenameEditorInnerHolder .Body{ position: relative; display: block; margin: 10px; padding-top: 10px; top: 0px; left: 0px; width: calc(100% - 20px); min-height: 50px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: center; unicode-bidi: plaintext; word-wrap: break-word; color: var(--primary-text-color-gray--); background-color: var(--color-white--); overflow: hidden; } .FilenameEditorHolder .FilenameEditorInnerHolder .ButtonsHolder{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 44px; text-align: left; direction: ltr; background-color: var(--color-hite--); border-top: 1px var(--color-light-blue--) solid; overflow: hidden; } .FilenameEditorHolder .FilenameEditorInnerHolder .ButtonsHolder .Button1{ position: relative; display: inline-block; top: 0px; left: 0px; margin-right: 2px; width: calc(50% - 1px); height: 44px; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); overflow: hidden; cursor: pointer; border-bottom-left-radius: 14px; transition: 0.3s; } .FilenameEditorHolder .FilenameEditorInnerHolder .ButtonsHolder .Button1:hover{ background-color: var(--primary-brand-color-dark-blue--); } .FilenameEditorHolder .FilenameEditorInnerHolder .ButtonsHolder .Button2{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(50% - 1px); height: 44px; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); overflow: hidden; cursor: pointer; border-bottom-right-radius: 14px; transition: 0.3s; } .FilenameEditorHolder .FilenameEditorInnerHolder .ButtonsHolder .Button2:hover{ background-color: var(--primary-brand-color-dark-blue--); } /* filename: ../app/css/models/CloudDrive/FilePicker.css */ .FilePickerHolder{ position: relative; display: block; margin: 0 auto; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.8); } .FilePickerHolder .FilePickerHolderTitlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } .FilePickerHolder .FilePickerHolderTitlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .FilePickerHolder .FilePickerHolderTitlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; } .FilePickerHolder .FilePickerHolderTitlebar .CloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; overflow: hidden; cursor: pointer; } .FilePickerHolder .FilePickerHolderTitlebar .CloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } .FilePickerHolder .FilePickerInnerHolder{ position: absolute; display: block; margin: 0px; padding: 4px; top: calc(50% - 106px); left: calc(50% - 175px); width: 340px; height: 255px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 18px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.6)); overflow: hidden; } .FilePickerHolder .FilePickerInnerHolder .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--primary-brand-color-blue--); border-top-right-radius: 14px; border-top-left-radius: 14px; overflow: hidden; } .FilePickerHolder .FilePickerInnerHolder .Title .BackButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 50px; background-position: 0px 0px; background-repeat: no-repeat; background-size: 30px 50px; background-image: url(/assets/images/icons/arrow_left_white.svg); filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); vertical-align: top; cursor: pointer; overflow: hidden; } .FilePickerHolder .FilePickerInnerHolder .Title .BackButton.BackButton_rtl{ background-image: url('/assets/images/icons/arrow_right_white.svg'); } .FilePickerHolder .FilePickerInnerHolder .Title .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 4px 4px; background-repeat: no-repeat; background-size: 30px 40px; background-image: url('/assets/images/icons/folder-document-yellow.svg'); filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); vertical-align: top; overflow: hidden; } .FilePickerHolder .FilePickerInnerHolder .Title .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 80px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: inherit; word-wrap: break-word; text-overflow: ellipsis; color: var(--color-white--); vertical-align: top; overflow: hidden; } .FilePickerHolder .FilePickerInnerHolder .Body{ position: relative; display: block; margin: 0 auto; top: 0px; left: 0px; width: 100%; height: 160px; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: inherit; word-wrap: break-word; color: var(--primary-text-color-gray--); background-color: var(--color-white--); overflow-x: hidden; overflow-y: auto; } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; cursor: pointer; overflow: hidden; } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 4px 4px; background-repeat: no-repeat; background-size: 30px 40px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); vertical-align: top; overflow: hidden; } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.Image{ position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; margin-left: 5px; margin-right: 5px; padding: 0px; width: 30px; height: 30px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; overflow: hidden; transition: 0.2s linear; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); background-color: var(--color-scheme-black--); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.Folder{ background-image: url('/assets/images/icons/folder-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.PDF{ background-image: url('/assets/images/icons/file_pdf_color.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.WORD{ background-image: url('/assets/images/icons/word-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.EXCEL{ background-image: url('/assets/images/icons/excel-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.POWERPOINT{ background-image: url('/assets/images/icons/ppt-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.ZIP{ background-image: url('/assets/images/icons/zip-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.CSV{ background-image: url('/assets/images/icons/csv-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.TXT{ background-image: url('/assets/images/icons/txt-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.XML{ background-image: url('/assets/images/icons/xml-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.AUDIO{ background-image: url('/assets/images/icons/audio-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.VIDEO{ background-image: url('/assets/images/icons/video-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Icon.OTHER{ background-image: url('/assets/images/icons/other-document.svg'); } .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 10px; width: calc(100% - 60px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: top; overflow: hidden; color: var(--primary-text-color-gray--); } .FilePickerHolder .FilePickerInnerHolder .ButtonsHolder{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 44px; text-align: left; direction: ltr; background-color: var(--color-hite--); border-top: 1px var(--color-light-blue--) solid; overflow: hidden; } .FilePickerHolder .FilePickerInnerHolder .ButtonsHolder .Button1{ position: relative; display: inline-block; top: 0px; left: 0px; margin-right: 2px; width: calc(50% - 1px); height: 44px; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-bottom-left-radius: 14px; overflow: hidden; cursor: pointer; transition: 0.3s; } .FilePickerHolder .FilePickerInnerHolder .ButtonsHolder .Button2{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(50% - 1px); height: 44px; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-bottom-right-radius: 14px; overflow: hidden; cursor: pointer; transition: 0.3s; } .FilePickerHolder .FilePickerInnerHolder .ButtonsHolder .Button2.SingleButton{ width: 100%; } @media only screen and (hover: hover) and (min-width: 781px){ .FilePickerHolder .FilePickerInnerHolder .Body .FolderItem:hover{ background-color: var(--color-lighter-gray--); } .FilePickerHolder .FilePickerInnerHolder .ButtonsHolder .Button1:hover{ background-color: var(--primary-brand-color-dark-blue--); } .FilePickerHolder .FilePickerInnerHolder .ButtonsHolder .Button2:hover{ background-color: var(--primary-brand-color-dark-blue--); } } /* filename: ../app/css/models/ChatDetails/ChatGroupNameEditor.css */ .ChatGroupNameEditorHolder{ position: relative; display: block; margin: 0 auto; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.8); } .ChatGroupNameEditorHolder .ChatGroupNameEditorHolderTitlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } .ChatGroupNameEditorHolder .ChatGroupNameEditorHolderTitlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .ChatGroupNameEditorHolder .ChatGroupNameEditorHolderTitlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; } .ChatGroupNameEditorHolder .ChatGroupNameEditorHolderTitlebar .CloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; /*background-color: var(--color-white--);*/ transition: 0.1s; vertical-align: middle; /*border: 2px var(--color-black--) solid;*/ overflow: hidden; cursor: pointer; } .ChatGroupNameEditorHolder .ChatGroupNameEditorHolderTitlebar .CloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder{ position: absolute; display: block; margin: 0px; padding: 2px; top: calc(50% - 112px); left: calc(50% - 173px); width: 340px; height: 225px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 15px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.6)); overflow: hidden; } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder .Title{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 20px; line-height: 50px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-top-right-radius: 14px; border-top-left-radius: 14px; overflow: hidden; } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder input[type=text]{ position: relative; display: block; padding: 12px 20px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 0px); height: 50px; box-sizing: border-box; font-size: 18px; line-height: 38px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder input[type=text]:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } .Counter{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 20px); height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: right; color: var(--primary-brand-color-blue--); overflow: hidden; } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder .Body{ position: relative; display: block; margin: 10px; padding-top: 10px; padding-bottom: 10px; top: 0px; left: 0px; width: calc(100% - 20px); min-height: 50px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: center; unicode-bidi: plaintext; word-wrap: break-word; color: var(--primary-text-color-gray--); background-color: var(--color-white--); overflow: hidden; } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder .ButtonsHolder{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 44px; text-align: left; direction: ltr; background-color: var(--color-hite--); border-top: 1px var(--color-light-blue--) solid; overflow: hidden; } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder .ButtonsHolder .Button1{ position: relative; display: inline-block; top: 0px; left: 0px; margin-right: 2px; width: calc(50% - 1px); height: 44px; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-bottom-left-radius: 14px; overflow: hidden; cursor: pointer; transition: 0.3s; } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder .ButtonsHolder .Button1:hover{ background-color: var(--primary-brand-color-dark-blue--); } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder .ButtonsHolder .Button2{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(50% - 1px); height: 44px; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-bottom-right-radius: 14px; overflow: hidden; cursor: pointer; transition: 0.3s; } .ChatGroupNameEditorHolder .ChatGroupNameEditorInnerHolder .ButtonsHolder .Button2:hover{ background-color: var(--primary-brand-color-dark-blue--); } /* filename: ../app/css/models/FileExplorer/FileExplorer.css */ .FileExplorerHolder{ position: relative; display: block; margin: 0 auto; width: 100%; height: 100%; overflow: hidden; background-color: var(--view-background-color--); } .FileExplorerHolder .TitleBar { position: relative; display: block; top: 0px; left: 0px; margin-top: 0px; margin-bottom: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } .FileExplorerHolder .TitleBar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .FileExplorerHolder .TitleBar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } .FileExplorerHolder .TitleBar .FileExplorerCloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; /*background-color: var(--color-white--);*/ transition: 0.1s; vertical-align: middle; /*border: 2px var(--color-black--) solid;*/ overflow: hidden; cursor: pointer; } .FileExplorerInnerHolder{ position: relative; display: block; margin: 0 auto; width: 100%; height: 100%; text-align: left; background-color: var(--inner-holder-background-color--); overflow: hidden; } .FileExplorerHolder .FileExplorerInnerHolder .rtl{ text-align: right !important; } .FileExplorerHolder .FileExplorerMenu{ position: relative; display:block; margin: 0 auto; margin-top: 10px; padding: 0px; width: calc(100% - 18px); max-width: 800px; height: 50px; } .FileExplorerHolder .FileExplorerMenu .MenuItem{ position: relative; display: inline-block; margin: 0px 2px; padding: 0px; top: 0px; left: 0px; height: 48px; width: calc(50% - 6px); border-top-left-radius: 8px; border-top-right-radius: 8px; font-family: var(--primary-font--); text-align: center; font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-gray-); background-color: var(--color-white--); border-left: 1px var(--color-lighter-gray--) solid; border-right: 1px var(--color-lighter-gray--) solid; border-top: 1px var(--color-lighter-gray--) solid; cursor: pointer; } .FileExplorerHolder .FileExplorerMenu .Selected{ background-color: var(--primary-brand-color-blue--) !important; color: var(--color-white--) !important; } .FileExplorerHolder .FileExplorerImageGrid{ position: relative; display: none; margin: 0 auto; padding: 0px; width: calc(100% - 24px); max-width: 800px; height: calc(100% - 120px); text-align: left; font-size: 0; background-color: var(--color-white--); border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; filter: drop-shadow(rgba(0, 0, 0, 0.2) 2px 2px 2px); overflow-x: hidden; overflow-y: auto; } .FileExplorerHolder .FileExplorerImageGrid .Image{ position: relative; display: inline-block; width: calc(33.3% - 4px); margin: 2px; height: 0; padding-bottom: calc(33.3% - 4px); background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; cursor: pointer; } .FileExplorerHolder .FileExplorerFileList{ position: relative; display: none; margin: 0 auto; padding: 0px; padding-top: 5px; width: calc(100% - 24px); max-width: 800px; height: calc(100% - 125px); background-color: var(--color-white--); border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; filter: drop-shadow(rgba(0, 0, 0, 0.2) 2px 2px 2px); overflow-x: hidden; overflow-y: auto; } .FileExplorerHolder .FileExplorerFileList .ListItem{ position: relative; display: block; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; padding: 0px; width: calc(100% - 10px); height: 60px; overflow: hidden; text-align: inherit; cursor: pointer; background-color: var(--color-scheme-gray-l0--); border-radius: 10px; } /* .FileExplorerHolder .FileExplorerFileList .ListItem .Icon{ position: relative; display: inline-block; margin-top: 5px; width: 50px; height: 50px; background-image: url(/assets/images/icons/file_black.svg); background-position: 5px 6px; background-repeat: no-repeat; background-size: 40px 40px; overflow: hidden; } */ .FileExplorerHolder .FileExplorerFileList .ListItem .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 60px; background-position: 6px 10px; background-size: 40px 40px; background-repeat: no-repeat; vertical-align: middle; transition: 0.2s linear; cursor: pointer; } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.PDF{ background-image: url('/assets/images/icons/file_pdf_color.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.WORD{ background-image: url('/assets/images/icons/word-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.EXCEL{ background-image: url('/assets/images/icons/excel-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.POWERPOINT{ background-image: url('/assets/images/icons/ppt-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.ZIP{ background-image: url('/assets/images/icons/zip-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.CSV{ background-image: url('/assets/images/icons/csv-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.TXT{ background-image: url('/assets/images/icons/txt-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.XML{ background-image: url('/assets/images/icons/xml-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.AUDIO{ background-image: url('/assets/images/icons/audio-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.VIDEO{ background-image: url('/assets/images/icons/video-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Icon.OTHER{ background-image: url('/assets/images/icons/other-document.svg'); } .FileExplorerHolder .FileExplorerFileList .ListItem .Data{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: calc(100% - 50px); height: 50px; vertical-align: middle; overflow: hidden; } .FileExplorerHolder .FileExplorerFileList .ListItem .Name{ position: relative; display: block; margin: 0px; padding: 0px; width: calc(100% - 15px); height: 30px; font-family: var(--primary-font--); text-align: inherit; font-size: 16px; line-height: 30px; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .FileExplorerHolder .FileExplorerFileList .ListItem .Data .Sender{ position: relative; display: inline-block; margin: 0px; margin-bottom: 5px; padding: 0px; width: calc(100% - 170px); height: 20px; font-family: var(--primary-font--); text-align: inherit; font-size: 14px; line-height: 16px; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; overflow: hidden; } .FileExplorerHolder .FileExplorerFileList .ListItem .Data .FileSize{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 64px; height: 20px; font-family: var(--primary-font--); text-align: center; font-size: 14px; line-height: 16px; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; overflow: hidden; } .FileExplorerHolder .FileExplorerFileList .ListItem .Data .Date{ position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 5px; padding-right: 5px; width: 90px; height: 20px; font-family: var(--primary-font--); text-align: right; font-size: 14px; line-height: 16px; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; overflow: hidden; } .FileExplorerHolder .EmptyListItem{ position: absolute; display: block; margin: 0px; padding: 0px; top: calc(50% - 25px); left: 10px; width: calc(100% - 20px); height: auto; min-height: 50px; font-family: var(--primary-font--); color: var(--primary-text-color-dark-gray--); font-size: 16px; line-height: 20px; text-align: center; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ .FileExplorerHolder .TitleBar .FileExplorerCloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } .FileExplorerHolder .FileExplorerFileList .ListItem:hover{ background-color: var(--color-lighter-gray--); } .FileExplorerHolder .FileExplorerImageGrid .Image:hover{ background-color: rgba(86, 86, 250, 0.5); background-blend-mode: screen; } } /* filename: ../app/css/models/TimeTracking/Todayssheet.css */ .TodaysSheet{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-scheme-white--); overflow:hidden; } .TodaysSheet .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 60px; } .TodaysSheet .Searchbar .SearchBarHolder{ position: relative; display: block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; padding-top: 10px; padding-bottom: 10px; text-align: center; width: calc(100% - 10px); height: 40px; } .TodaysSheet .Searchbar .SearchBarHolder .Space{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: calc(100% - 193px); height: 40px; vertical-align: middle; } .TodaysSheet .Searchbar .SearchBarHolder .SearchField{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 180px; height: 40px; vertical-align: middle; } .TodaysSheet #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } .TodaysSheet .Searchbar .SearchField input[type=text]{ position: absolute; display: block; padding-left: 35px; padding-right: 35px; width: 180px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } .TodaysSheet .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } .TodaysSheet .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } .TodaysSheet .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } .TodaysSheet .Infobar{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; text-align: center; vertical-align: middle; } .TodaysSheet .Infobar .InfoBarItem{ position: relative; display: inline-block; margin: 3px; margin-right: 2px; margin-left: 2px; padding: 0px; top: 0px; left: 0px; width: calc(33.3% - 6px); max-width: 150px; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: center; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-superlight-gray--); border: 1px var(--color-light-gray--) solid; border-radius: 5px; overflow: hidden; } .TodaysSheet .Table{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; margin-left: 4px; margin-right: 4px; margin-bottom: 2px; padding: 0px; width: calc(100% - 10px); height: calc(100% - 104px); direction: ltr; background-color: var(--color-superlight-gray--); border-radius: 5px; border: 1px var(--color-light-gray--) solid; overflow: hidden; container-name: TodaysSheetTable; container-type: inline-size; } .TodaysSheet .TableTitle{ position: relative; display: block; top: 0px; left: 0px; margin:0px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding: 0px; width: calc(100% - 20px); height: 30px; background-color: var(--color-lighter-gray--); border-radius: 10px; border: 1px var(--color-light-gray--) solid; overflow: hidden; } .TodaysSheet .TableTitle .TimelineHolder{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: auto; height: 100%; text-align: center; } .TodaysSheet .TimelineHolder .FirstChild{ border-left: 0px !important; } .TodaysSheet .TimelineItem{ position: relative; display: inline-block; width: calc(4% - 1px); height: 30px; font-family: var(--primary-font--); font-size: 12px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--primary-text-color-dark-gray--); border-left: 1px var(--color-light-gray--) solid; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TodaysSheet .TableTitle .TimelineItemSelected{ position: relative; width: calc(4% - 1px); height: 30px; font-family: var(--primary-font--); font-size: 12px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; white-space: nowrap; border-left: 1px var(--color-light-gray--) solid ; background-color: var(--color-gray--); overflow: hidden; } .TodaysSheet .TimelineItemSelected{ position: relative; display: inline-block; width: calc(4% - 1px); height: 30px; font-family: var(--primary-font--); font-size: 12px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--primary-text-color-dark-gray--); border-left: 1px var(--color-light-gray--) solid; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TodaysSheet .LongTitle{ display: inline-block; } .TodaysSheet .ShortTitle{ display: none; } .TodaysSheet .Table .TableItemsHolder{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: calc(100% - 53px); overflow-x: hidden; overflow-y: auto; } .TodaysSheet .Table .TableItemsHolder .TableItem{ position: relative; display: block; top: 0px; left: 0px; margin:0px; margin-top: 30px; margin-left: 10px; margin-right: 10px; margin-bottom: 50px; padding: 0px; width: calc(100% - 20px); height: 50px; text-align: left; border: 1px var(--color-light-gray--) solid; border-radius: 10px; background-color: var(--color-white--); transition: 0.2s linear; } .TodaysSheet .NoActiveShiftsTableItem{ position: absolute; display: block; top: calc(50% - 50px); width: calc(100% - 6px); height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 100px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TodaysSheet .Table .TableItemsHolder .TableItem .TimelineHolder{ position: absolute; display: block; top: 10px; left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; text-align: center; } .TodaysSheet .TableItem .Info{ position: absolute; display: block; padding-left: 10px; padding-right: 10px; top: -21px; height: 20px; left: 4px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: left; color: var(--primary-brand-color-blue--); text-overflow: ellipsis; white-space: nowrap; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; /*filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4));*/ transition: 0.2s linear; cursor: pointer; z-index: 10000; } .TodaysSheet .TableItem .Info2{ position: absolute; display: block; padding-left: 10px; padding-right: 10px; bottom: -20px; right: 5px; width: auto; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; z-index: 10000; } .TodaysSheet .TableItem .Info3{ position: absolute; display: block; padding-left: 10px; padding-right: 10px; top: -12px; right: 5px; width: auto; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 5px; z-index: 10000; } .TodaysSheet .TableItem .Active{ color: var(--color-white--); background-color: var(--color-button-green--); } .TodaysSheet .TableItem .OnABreak{ color: var(--color-white--); background-color: var(--color-red--); } .TodaysSheet .TableItem .TableItemInfo .ProfilePicture{ position: relative; display: inline-block; margin: 10px; padding: 0px; top: -2px; height: 44px; width: 44px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; border-radius: 40px; border: 2px #ffffff solid; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); } .TodaysSheet .TableItem .ProfilePicture{ position: absolute; display: block; margin: 0px; padding: 0px; top: -6px; left: 0px; height: 26px; width: 26px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } .TodaysSheet .TableItem .LeftSpace{ position: relative; display: inline-block; width: 4%; height: 100%; vertical-align: middle; text-align: center; } .TodaysSheet .TableItem .Space{ position: relative; display: inline-block; width: 4%; height: 100%; vertical-align: middle; text-align: center; } .TodaysSheet .TableItem .RightSpace{ position: relative; display: inline-block; width: 4%; height: 100%; vertical-align: middle; text-align: center; } .TodaysSheet .TableItem .MiniSpace{ position: relative; display: inline-block; vertical-align: middle; text-align: center; width: 1%; height: 100%; } .TodaysSheet .TableItem .Start{ position: relative; display: inline-block; vertical-align: middle; text-align: center; width: 1%; height: 20px; background-color: var(--primary-brand-color-blue--); border-top-left-radius: 10px; border-bottom-left-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); z-index: 100; } .TodaysSheet .TableItem .Body{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: calc(50% - 10px); vertical-align: middle; text-align: center; width: 100%; height: 20px; background-color: var(--primary-brand-color-blue--); filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); } .TodaysSheet .TableItem .MiniBody{ position: relative; display: inline-block; vertical-align: middle; text-align: center; width: 1%; height: 20px; background-color: var(--primary-brand-color-blue--); filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); } .TodaysSheet .TableItem .End{ position: relative; display: inline-block; vertical-align: middle; text-align: center; width: 1%; height: 20px; background-color: var(--primary-brand-color-blue--); border-top-right-radius: 10px; border-bottom-right-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); } .TodaysSheet .MobileTable{ position: relative; display: none; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 100px); background-color: var(--color-scheme-white--); text-align: left; direction: ltr; overflow-x: hidden; overflow-y: auto; } .TodaysSheet .MobileTable .MobileTableItemsHolder{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; min-height: 100%; height: auto; overflow: hidden; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem{ position: relative; display: block; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; width: calc(100% - 10px); height: auto; background-color: var(--color-superlight-gray--); border: 1px var(--color-light-gray--) solid; overflow: hidden; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem .InfoLine{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--color-scheme-white--); border-bottom: 1px var(--color-lighter-gray--) solid; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; height: 40px; width: 40px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; border-radius: 22px; border: 2px #ffffff solid; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem .InfoLine .DoubleLineHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 55px); height: 50px; vertical-align: middle; overflow: hidden; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem .DoubleLineHolder .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; overflow: hidden; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem .DoubleLineHolder .Location{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 100%; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 16px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; overflow: hidden; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem .LargeInfoLine{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(50% - 1px); height: 49px; border-bottom: 1px var(--color-lighter-gray--) solid; border-right: 1px var(--color-lighter-gray--) solid; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem .LargeInfoLine:nth-last-child(-n + 2){ border-bottom: 0px; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem .LargeInfoLineTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-top: 4px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TodaysSheet .MobileTable .MobileTableItemsHolder .MobileTableItem .LargeInfoLineText{ position: relative; display: block; margin: 0 auto; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 26px; font-family: var(--primary-font--); font-size: 14px; line-height: 26px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media only screen and (min-width: 441px) and (max-width: 620px) { .TodaysSheet .TableTitle{ margin-left: 0px; margin-right: 0px; width: 100%; } .TodaysSheet .TableTitle .TimelineHolder{ margin-left: 0px; margin-right: 0px; width: 100%; } .TodaysSheet .Table .TableItemsHolder .TableItem{ margin-left: 0px; margin-right: 0px; width: calc(100% - 2px); } } @container TodaysSheetTable (max-width: 1000px){ .TodaysSheet .LongTitle{ display: none !important; } .TodaysSheet .ShortTitle{ display: inline-block !important; } } @container TodaysSheetTable (max-width: 620px){ .TodaysSheet .EvenTitle{ width: calc(8% - 3px) !important; border-right: 0px !important; border-left: 1px var(--color-light-gray--) solid; } .TodaysSheet .OddTitle{ display: none !important; } } @media only screen and (hover: hover) and (min-width: 781px){ .TodaysSheet .TableItem:hover{ background-color: var(--color-light-gray--); } .TodaysSheet .Table .TableItemsHolder .TableItem:hover > .TableItemInfo{ opacity: 1.0; } .TodaysSheet .TableItem .Info:hover{ color: var(--primary-brand-color-dark-blue--); } } @media only screen and (max-width: 780px){ .TodaysSheet .Searchbar .SearchBarHolder .Space { display: none; } .TodaysSheet .Searchbar { border-bottom: 1px var(--color-light-gray--) solid; } .TodaysSheet .Searchbar .SearchField input[type=text]{ width: 100%; } .TodaysSheet .Searchbar .SearchBarHolder .SearchField { margin-left: 5px; margin-right: 5px; width: calc(100% - 10px); } .TodaysSheet .Table{ display: none; } .TodaysSheet .MobileTable{ display: block; } } /* filename: ../app/css/models/TimeTracking/Employeesheet.css */ .EmployeeSheet{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-scheme-white--); overflow:hidden; } #TimetrackingViewPopUpContainerInnerHolder .EmployeeSheet{ margin-top: 10px; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); height: calc(100% - 12px); border-top-left-radius: 8px; border-top-right-radius: 8px; border: 1px var(--color-scheme-gray-l1--) solid } .EmployeeSheet .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 60px; border-bottom: 1px var(--color-scheme-gray-l2--) solid; } .EmployeeSheet .Searchbar .SearchBarHolder{ position: relative; display: block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 10px); height: 40px; text-align: center; } .EmployeeSheet .Searchbar .SearchBarHolder .ProfileHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(50% - 150px); height: 40px; vertical-align: middle; overflow: hidden; } .EmployeeSheet .Searchbar .SearchBarHolder .ProfileHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; } .EmployeeSheet .Searchbar .SearchBarHolder .ProfileHolder .ProfilePictureNoBorder{ border: unset; } .EmployeeSheet .Searchbar .SearchBarHolder .ProfileHolder .ProfileName{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: calc(100% - 64px); height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; } .EmployeeSheet .Searchbar .SearchBarHolder .DatePickerHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 286px; height: 40px; vertical-align: middle; transition: 0.2s; } .EmployeeSheet .Searchbar .StartDateHolder{ position: relative; display: inline-block; text-align: center; vertical-align: middle; width: 120px; height: 40px; } .EmployeeSheet .Searchbar .ToText{ position: relative; display: inline-block; width: 40px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; vertical-align: middle; color: var( --color-dark-gray--); } .EmployeeSheet .Searchbar .EndDateHolder{ position: relative; display: inline-block; text-align: center; vertical-align: middle; width: 120px; height: 40px; } .EmployeeSheet .Searchbar .SearchBarHolder .Space{ position: relative; display: inline-block; width: calc(50% - 330px); height: 40px; vertical-align: middle; overflow: hidden; } .EmployeeSheet .Searchbar .InfoHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 180px; height: 38px; font-family: var(--primary-font--); font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); border: 1px var(--color-light-gray--) solid; border-radius: 10px; vertical-align: middle; overflow: hidden; } .EmployeeSheet .Searchbar .SearchButton{ position: absolute; display: block; top: 18px; right: 10px; width: 140px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; color: var(--color-white--); background-color: var(--color-button-blue--); border-radius: 10px; cursor: pointer; } .EmployeeSheet .Searchbar .SearchButton:active{ background-color: var(--color-button-dark-blue--); } .EmployeeSheet .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 60px); text-align: left; direction: ltr; overflow-x:auto; overflow-y: hidden; background-color: var(--color-scheme-white--); } .EmployeeSheet .TableInfoHolder{ position: relative; display: block; margin: 0 auto; margin-bottom: 1px; padding: 0px; width: 100%; height: 50px; background-color: var(--color-scheme-blue-l2--); border-top: 1px var(--color-scheme-blue-l1--) solid; border-bottom: 1px var(--color-scheme-blue-l1--) solid; overflow: hidden; } .EmployeeSheet .TableInfoHolder .InfoInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; } .EmployeeSheet .TableInfoHolder .InfoInnerHolder .InfoItem{ position: relative; display: inline-block; margin: 0 auto; margin-top: 2px; margin-left: 5px; margin-right: 5px; padding: 0px; width: calc(25% - 10px); max-width: 200px; height: 100%; vertical-align: middle; overflow: hidden; } .EmployeeSheet .TableInfoHolder .InfoInnerHolder .InfoItem .InfoTitle{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 25px; font-family: var(--primary-font--); font-size: 14px; line-height: 25px; text-align: center; text-overflow: ellipsis; /*text-shadow: 1px 1px 1px var(--primary-text-color-gray--);*/ color: var(--primary-text-color-white--); overflow: hidden; } .EmployeeSheet .TableInfoHolder .InfoInnerHolder .InfoItem .InfoText{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 25px; font-family: var(--primary-font--); font-size: 18px; line-height: 16px; text-align: center; text-overflow: ellipsis; /*text-shadow: 1px 1px 1px var(--primary-text-color-gray--);*/ color: var(--primary-text-color-white--); overflow: hidden; } .EmployeeSheet .TableTitle{ position: relative; display: block; top: 0px; left: 0px; margin:0px; margin-bottom: 2px; padding: 0px; width: 100%; height: 50px; font-weight: bold; border-top: 1px var(--color-scheme-gray-l2--) solid; border-bottom: 1px var(--color-scheme-gray-l2--) solid; overflow:hidden; } .EmployeeSheet .TableTitle .TableTitleInnerHolder{ position: relative; display: block; margin:0 auto; padding: 0px; width: 100%; height: 100%; text-align: left; background-color: var(--color-lighter-gray--); } .EmployeeSheet .TableTitle .TableTitleItem{ position: relative; display: inline-block; margin-top: 10px; width: 200px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: left; font-weight: bold; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .Table .TableItemsHolder{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: calc(100% - 108px); overflow-x: hidden; overflow-y: auto; } .EmployeeSheet .Table .TableItemsHolder .NoItemsFoundTableItem{ position: relative; display: block; top: calc(50% - 50px); margin: 0 auto; padding: 0px; width: calc(100% - 6px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; /*border-bottom: 1px var(--color-scheme-gray-l2--) solid;*/ overflow: hidden; } .EmployeeSheet .Table .MobileTableItem{ position: relative; display: none; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; width: calc(100% - 10px); height: auto; min-height: 153px; background-color: var(--color-superlight-gray--); border: 1px var(--color-light-gray--) solid; overflow: hidden; } .EmployeeSheet .Table .MobileTableItem .InfoLine{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--color-scheme-white--); border-bottom: 1px var(--color-lighter-gray--) solid; } .EmployeeSheet .Table .MobileTableItem .InfoLine:last-child{ border-bottom: unset; } .EmployeeSheet .Table .MobileTableItem .WhiteBackground{ background-color: var(--color-scheme-white--) !important; } .EmployeeSheet .Table .MobileTableItem .ItemTitle{ background-color: var(--color-white--); } .EmployeeSheet .Table .MobileTableItem .InfoLine .Section2{ position: relative; display: inline-block; width: calc(50% - 1px); height: 100%; vertical-align: middle; background-color: var(--color-superlight-gray--); border-right: 1px var(--color-lighter-gray--) solid; overflow: hidden; } .EmployeeSheet .Table .MobileTableItem .InfoLine .Section3{ position: relative; display: inline-block; width: calc(33.3% - 1px); height: 100%; vertical-align: middle; background-color: var(--color-superlight-gray--); border-right: 1px var(--color-lighter-gray--) solid; overflow: hidden; } .EmployeeSheet .Table .MobileTableItem .InfoLine .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top: 4px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .Table .MobileTableItem .InfoLine .Value{ position: relative; display: block; margin: 0 auto; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 26px; font-family: var(--primary-font--); font-size: 14px; line-height: 26px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .Table .MobileTableItem .InfoLine .Value .IssuesInnerHolder{ position: relative; display: block; margin: 0px; width: auto; height: 20px; font-size: 14px; line-height: 20px; } .EmployeeSheet .Table .MobileTableItem .InfoLine .Value .HasIssues{ width: auto; background-color: var(--color-scheme-blue-l2--); color: var(--primary-text-color-white--); text-align: center; border-radius: 10px; } .EmployeeSheet .Table .MobileTableItem .InfoLine .Value .HasApprovedIssues{ width: auto; background-color: var(--color-green--); color: var(--primary-text-color-white--); text-align: center; border-radius: 10px; } .EmployeeSheet .Table .MobileTableItem .InfoLine .Value .HasRejectedIssues{ width: auto; background-color: var(--color-red--); color: var(--primary-text-color-white--); text-align: center; border-radius: 10px; } .EmployeeSheet .TableItem{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 20px; padding-right: 20px; width: calc(100% - 46px); height: 50px; text-align: left; border-bottom: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; cursor: pointer; } .EmployeeSheet .TableItem:hover{ background-color: var(--color-lighter-gray--); } .EmployeeSheet .TableItem .Date{ position: relative; display: inline-block; margin-top: 10px; width: 14%; height: 30px; font-family: var(--primary-font--); font-weight: bold; font-size: 16px; line-height: 30px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .TableItem .Position{ position: relative; display: inline-block; margin-top: 10px; width: 15%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .TableItem .StartTime{ position: relative; display: inline-block; margin-top: 10px; width: 15%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .TableItem .EndTime{ position: relative; display: inline-block; margin-top: 10px; width: 15%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .TableItem .TotalTime{ position: relative; display: inline-block; margin-top: 10px; width: 15%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .TableItem .BreakTime{ position: relative; display: inline-block; margin-top: 10px; width: 15%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .TableItem .Issues{ position: relative; display: inline-block; margin-top: 10px; width: 10%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmployeeSheet .TableItem .Issues .IssuesInnerHolder{ position: relative; display: block; margin: 0 auto; padding-top: 5px; padding-bottom: 5px; font-size: 14px; width: auto; height: 20px; line-height: 20px; } .EmployeeSheet .TableItem .Issues .HasIssues{ width: auto; background-color: var(--color-scheme-blue-l2--); color: var(--primary-text-color-white--); border-radius: 10px; } .EmployeeSheet .TableItem .Issues .HasApprovedIssues{ width: auto; background-color: var(--color-green--); color: var(--primary-text-color-white--); border-radius: 10px; } .EmployeeSheet .TableItem .Issues .HasRejectedIssues{ width: auto; background-color: var(--color-red--); color: var(--primary-text-color-white--); border-radius: 10px; } @media only screen and (hover: hover) and (min-width: 781px){ } @media only screen and (max-width: 780px) { #TimetrackingViewPopUpContainerInnerHolder .EmployeeSheet{ margin-top: unset; margin-left: unset; margin-right: unset; width: 100%; height: 100%; border-top-left-radius: unset; border-top-right-radius: unset; border: unset } .EmployeeSheet .Searchbar .SearchBarHolder .SearchField{ display: none; } .EmployeeSheet .Searchbar .ToText { width: 30px; } .EmployeeSheet .Searchbar .SearchBarHolder .ProfileHolder{ display: none; } .EmployeeSheet .Searchbar .SearchBarHolder .Space{ display: none; } .EmployeeSheet .Searchbar .SearchBarHolder .InfoHolder{ display: none; } .EmployeeSheet .TableTitle{ display: none; } .EmployeeSheet .TableInfoHolder{ margin-bottom: 0px; } .EmployeeSheet .TableInfoHolder .InfoInnerHolder .InfoItem .InfoTitle{ font-size: 12px; } .EmployeeSheet .TableInfoHolder .InfoInnerHolder .InfoItem .InfoText{ font-size: 15px; } .EmployeeSheet .Table .TableItemsHolder{ height: calc(100% - 56px); } .EmployeeSheet .Table .TableItemsHolder .TableItem{ display: none; } .EmployeeSheet .Table .TableItemsHolder .MobileTableItem{ display: block; } } /* filename: ../app/css/models/TimeTracking/Timesheet.css */ .TimeSheet{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-scheme-white--); overflow:hidden; } .TimeSheet .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 60px; border-bottom: 1px var(--color-scheme-gray-l2--) solid; } .TimeSheet .Searchbar .SearchBarHolder{ position: relative; display: block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; padding-top: 10px; padding-bottom: 10px; text-align: center; width: calc(100% - 10px); height: 40px; } .TimeSheet .Searchbar .SearchBarHolder .SearchField{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 180px; height: 40px; vertical-align: middle; } .TimeSheet .SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } .TimeSheet .Searchbar .SearchField input[type=text]{ position: absolute; display: block; padding-left: 35px; padding-right: 35px; width: 180px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } .TimeSheet .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } .TimeSheet .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } .TimeSheet .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } .TimeSheet .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 330px); height: 40px; vertical-align: middle; overflow: hidden; } .TimeSheet .Searchbar .SearchBarHolder .DatePickerHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 286px; height: 40px; vertical-align: middle; transition: 0.2s; } .TimeSheet .Searchbar .StartDateHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 120px; height: 40px; text-align: center; vertical-align: middle; } .TimeSheet .Searchbar .ToText{ position: relative; display: inline-block; width: 40px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; vertical-align: middle; color: var( --color-dark-gray--); } .TimeSheet .Searchbar .EndDateHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 120px; height: 40px; text-align: center; vertical-align: middle; } .TimeSheet .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 330px); height: 40px; vertical-align: middle; overflow: hidden; } .TimeSheet .Searchbar .InfoHolder{ position: relative; display: inline-block; width: 180px; height: 38px; font-family: var(--primary-font--); font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-lighter-gray--); border: 1px var(--color-light-gray--) solid; border-radius: 10px; overflow: hidden; } .TimeSheet .Table{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 60px); text-align: left; direction: ltr; overflow-x:auto; overflow-y: hidden; background-color: var(--color-scheme-white--); } .TimeSheet .TableTitle{ position: relative; display: block; margin: 0 auto; margin-bottom: 2px; padding: 0px; height: 50px; width: 100%; font-weight: bold; background-color: var(--color-scheme-gray-l1--); border-bottom: 1px var(--color-scheme-gray-l2--) solid; } .TimeSheet .TableTitle .TableTitleInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: left; } .TimeSheet .Table .TableItem{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 20px; padding-right: 20px; width: calc(100% - 46px); height: 50px; text-align: left; border-bottom: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; cursor: pointer; } .TimeSheet .Table .TableItem .Name{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; width: calc(25% - 40px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TimeSheet .Table .TableItem .TotalHours{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; width: 15%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TimeSheet .Table .TableItem .TotalShifts{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; width: 15%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TimeSheet .Table .TableItem .Days{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; width: 15%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TimeSheet .Table .TableItem .Absence{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; width: 15%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TimeSheet .Table .TableItem .Issues{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; width: 11%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-dark-gray--); vertical-align: middle; overflow: hidden; } .TimeSheet .Table .TableItem .Issues .IssuesInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 5px; width: auto; height: 20px; line-height: 20px; text-align: center; } .TimeSheet .Table .TableItem .Issues .HasIssues{ width: 40px; background-color: var(--color-scheme-blue-l2--); color: var(--primary-text-color-white--); border-radius: 10px; } .TimeSheet .Table .TableItemsHolder{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: calc(100% - 54px); overflow-x: hidden; overflow-y: auto; } .TimeSheet .Table .TableItemsHolder .NoItemsFoundTableItem{ position: relative; display: block; margin: 0 auto; padding: 0px; top: calc(50% - 50px); width: calc(100% - 6px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; /*border-bottom: 1px var(--color-scheme-gray-l2--) solid;*/ overflow: hidden; } .TimeSheet .TableItem .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 2px; margin-bottom: 2px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; left: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } .TimeSheet .TableItem .ProfilePictureNoBorder{ border: unset; } .TimeSheet .Table .MobileTableItem{ position: relative; display: none; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; width: calc(100% - 10px); height: auto; min-height: 153px; background-color: var(--color-superlight-gray--); border: 1px var(--color-light-gray--) solid; overflow: hidden; } .TimeSheet .Table .MobileTableItem .InfoLine{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; border-bottom: 1px var(--color-lighter-gray--) solid; } .TimeSheet .Table .MobileTableItem .InfoLine:last-child{ border-bottom: unset; } .TimeSheet .Table .MobileTableItem .ItemTitle{ background-color: var(--color-white--); } .TimeSheet .Table .MobileTableItem .InfoLine .Section2{ position: relative; display: inline-block; width: calc(50% - 1px); height: 100%; vertical-align: middle; border-right: 1px var(--color-lighter-gray--) solid; overflow: hidden; } .TimeSheet .Table .MobileTableItem .InfoLine .Section3{ position: relative; display: inline-block; width: calc(33.3% - 1px); height: 100%; vertical-align: middle; border-right: 1px var(--color-lighter-gray--) solid; overflow: hidden; } .TimeSheet .Table .MobileTableItem .InfoLine .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top: 4px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TimeSheet .Table .MobileTableItem .InfoLine .Value{ position: relative; display: block; margin: 0 auto; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 26px; font-family: var(--primary-font--); font-size: 14px; line-height: 26px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .TimeSheet .Table .MobileTableItem .InfoLine .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; height: 40px; width: 40px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; border-radius: 22px; border: 2px #ffffff solid; } .TimeSheet .Table .MobileTableItem .InfoLine .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 54px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; overflow: hidden; } .TimeSheet .Table .MobileTableItem .InfoLine .Value .IssuesInnerHolder{ position: relative; display: block; margin: 0px; width: auto; height: 20px; text-align: center; line-height: 20px; } .TimeSheet .Table .MobileTableItem .InfoLine .Value .HasIssues{ width: auto; background-color: var(--color-scheme-blue-l2--); color: var(--primary-text-color-white--); text-align: center; border-radius: 10px; } @media only screen and (hover: hover) and (min-width: 781px){ .TimeSheet .Table .TableItemsHolder .TableItem:hover{ background-color: var(--color-lighter-gray--); } } @media only screen and (max-width: 780px){ .TimeSheet .Searchbar .SearchBarHolder .Space1{ display: none; } .TimeSheet .Searchbar .SearchBarHolder .Space2{ display: none; } .TimeSheet .Searchbar { border-bottom: 1px var(--color-light-gray--) solid; } .TimeSheet .Searchbar .SearchBarHolder .SearchField{ display: none; } .TimeSheet .Searchbar .ToText{ width: 30px; } .TimeSheet .Searchbar .SearchBarHolder .InfoHolder{ display: none; } .TimeSheet .Table .TableTitle{ display: none; } .TimeSheet .Table .TableItemsHolder{ padding: 0px; height: 100%; } .TimeSheet .Table .TableItem{ display: none; } .TimeSheet .Table .MobileTableItem{ display: block; } } /* filename: ../app/css/models/TimeTracking/Absencerequests.css */ .AbsenceRequests{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-scheme-white--); overflow:hidden; } .AbsenceRequests .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 60px; border-bottom: 1px var(--color-scheme-gray-l2--) solid; } .AbsenceRequests .Searchbar .SearchBarHolder{ position: relative; display: block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; padding-top: 10px; padding-bottom: 10px; text-align: center; width: calc(100% - 10px); height: 40px; } .AbsenceRequests .Searchbar .SearchBarHolder .SearchField{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 180px; height: 40px; vertical-align: middle; } .AbsenceRequests .SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } .AbsenceRequests .Searchbar .SearchField input[type=text]{ position: absolute; display: block; padding-left: 35px; padding-right: 35px; width: 180px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } .AbsenceRequests .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } .AbsenceRequests .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 8px; right: 8px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } .AbsenceRequests .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } .AbsenceRequests .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 330px); height: 40px; vertical-align: middle; overflow: hidden; } .AbsenceRequests .Searchbar .SearchBarHolder .DatePickerHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 286px; height: 40px; vertical-align: middle; transition: 0.2s; } .AbsenceRequests .Searchbar .StartDateHolder{ position: relative; display: inline-block; top: 0px; left: 0px; text-align: center; vertical-align: middle; width: 120px; height: 40px; } .AbsenceRequests .Searchbar .ToText{ position: relative; display: inline-block; width: 40px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; vertical-align: middle; color: var( --color-dark-gray--); } .AbsenceRequests .Searchbar .EndDateHolder{ position: relative; display: inline-block; top: 0px; left: 0px; text-align: center; vertical-align: middle; width: 120px; height: 40px; } .AbsenceRequests .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 330px); height: 40px; vertical-align: middle; overflow: hidden; } .AbsenceRequests .Searchbar .InfoHolder{ position: relative; display: inline-block; width: 180px; height: 38px; font-family: var(--primary-font--); font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); vertical-align: middle; border: 1px var(--color-light-gray--) solid; border-radius: 10px; overflow: hidden; } .AbsenceRequests .FilterButton{ position: absolute; display: none; top: 65px; left: 5px; margin: 0px; padding: 0px; height: 40px; width: 40px; background-image: url(assets/images/icons/filter_white.svg); background-color: var(--primary-brand-color-blue--); background-position: 5px 5px; background-repeat: no-repeat; background-size: 30px 30px; border-radius: 5px; transition: background-color 0.2s linear; border: 1px var(--color-scheme-white--) solid; cursor: pointer; } .AbsenceRequests .FilterButton .FilterMenu{ position: absolute; display: none; top: 44px; left: -2px; width: 200px; height: auto; min-height: 50px; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-radius: 10px; overflow: hidden; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); transform: translateZ(0); z-index: 1000; } .AbsenceRequests .FilterMenu_rtl{ left: unset; right: -2px; } .AbsenceRequests .FilterButton .FilterMenu .FilterMenuItem{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; border-bottom: 1px var(--color-lighter-gray--) solid; } .AbsenceRequests .FilterButton .FilterMenu .FilterMenuItemSelected{ background-color: var(--primary-brand-color-blue--); color: var(--primary-text-color-white--); } .AbsenceRequests .FilterButton_rtl{ left: unset; right: 5px; } .AbsenceRequests .Table{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 60px); background-color: var(--color-scheme-white--); overflow-x:auto; overflow-y: hidden; } .AbsenceRequests .TableTitle{ position: relative; display: block; margin: 0 auto; margin-bottom: 2px; padding: 0px; height: 50px; width: 100%; font-weight: bold; border-bottom: 1px var(--color-scheme-gray-l2--) solid; } .AbsenceRequests .TableTitle .TableTitleInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 16px; padding-right: 16px; width: calc(100% - 26px); height: 100%; text-align: left; background-color: var(--color-scheme-gray-l1--); } .AbsenceRequests .Table .TableItemsHolder{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: calc(100% - 54px); text-align: center; overflow-x: hidden; overflow-y: auto; } .AbsenceRequests .Table .TableItemsHolder .TableItem{ position: relative; display: block; margin:0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 26px); height: 50px; overflow:hidden; text-align: left; border-bottom: 1px var(--color-scheme-gray-l2--) solid; cursor: pointer; } .AbsenceRequests .Table .TableItemsHolder .NoItemsFoundTableItem{ position: relative; display: block; top: calc(50% - 50px); margin: 0 auto; padding: 0px; width: calc(100% - 6px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; /*border-bottom: 1px var(--color-scheme-gray-l2--) solid;*/ overflow: hidden; } .AbsenceRequests .Table .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 3px; margin-left: 15px; margin-right: 15px; padding: 0px; top: 0px; left: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px var(--color-scheme-white--) solid; } .AbsenceRequests .Table .ProilePictureNoBorder{ border: unset; } .AbsenceRequests .Table .Name{ position: relative; display: inline-block; margin-top: 5px; width: calc(24% - 74px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .AbsenceRequests .Table .Type{ position: relative; display: inline-block; margin-top: 5px; width: 14%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .AbsenceRequests .Table .Dates{ position: relative; display: inline-block; margin-top: 5px; width: 30%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .AbsenceRequests .Table .RequestDate{ position: relative; display: inline-block; margin-top: 5px; width: 16%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .AbsenceRequests .Table .Status{ position: relative; display: inline-block; margin-top: 5px; width: 16%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .AbsenceRequests .Table .TableItemsHolder .TableItem .Status .StatusInnerHolder{ position: relative; display: inline-block; width: 100%; max-width: 100px; height: 100%; border-radius: 10px; } .AbsenceRequests .Table .TableItemsHolder .TableItem .Pending{ background-color: var(--primary-brand-color-blue--); color: var(--primary-text-color-white--); } .AbsenceRequests .Table .TableItemsHolder .TableItem .Approved{ background-color: var(--color-green--); color: var(--primary-text-color-white--); } .AbsenceRequests .Table .TableItemsHolder .TableItem .Rejected{ background-color: var(--color-red--); color: var(--primary-text-color-white--); } /* Mobile Table Item */ .AbsenceRequests .Table .TableItemsHolder .MobileTableItem { position: relative; display: none; margin:0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; width: calc(100% - 10px); height: 150px; overflow:hidden; text-align: left; border: 1px var(--color-light-gray--) solid; cursor: pointer; } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem:active .InfoLine{ background-color: var(--color-scheme-gray-l1--); } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem .InfoLine{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--color-lighter-gray--) solid; } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem .InfoLine .ProfilePicture { position: relative; display: inline-block; margin: 0 auto; margin-top: 3px; margin-left: 5px; margin-right: 5px; padding: 0px; height: 40px; width: 40px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; border-radius: 22px; border: 2px #ffffff solid; } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem .InfoLine .Name{ position: relative; display: inline-block; margin: 0 auto; margin-top: 3px; padding: 0px; width: calc(100% - 54px); height: 44px; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; overflow: hidden; } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem .InfoLineItem{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(50% - 21px); height: 100%; background-color: var(--color-superlight-gray--); border-right: 1px var(--color-lighter-gray--) solid; } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem .InfoLineItem:last-child{ border-right: 1px var(--color-lighter-gray--) solid; } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem .InfoLineItemFullWidth{ width: calc(100% - 20px); } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem .InfoLineItem .ItemTitle{ position: relative; display: block; margin: 0 auto; margin-top: 3px; padding: 0px; width: 100%; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem .InfoLineItem .ItemValue{ position: relative; display: block; margin: 0 auto; margin-top: 3px; padding: 0px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 13px; line-height: 18px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ .AbsenceRequests .TableItem:hover{ background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-white--); } .AbsenceRequests .FilterButton .FilterMenu .FilterMenuItemSelected:hover{ background-color: var(--primary-brand-color-dark-blue--) !important; } .AbsenceRequests .FilterButton .FilterMenu .FilterMenuItem:hover{ background-color: var(--color-scheme-gray-l1--); } .AbsenceRequests .FilterButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } } @media only screen and (max-width: 780px) { .AbsenceRequests .Searchbar .SearchBarHolder .SearchField{ display: none; } .AbsenceRequests .Searchbar .ToText { width: 30px; } .AbsenceRequests .FilterButton{ top:11px; width: 30px; background-position: 0px 5px; } .AbsenceRequests .Searchbar .SearchBarHolder .InfoHolder{ display: none; } .AbsenceRequests .TableTitle{ display: none; } .AbsenceRequests .Table .TableItemsHolder { height: 100%; background-color: var(--color-scheme-white--); } .AbsenceRequests .Table .TableItemsHolder .TableItem{ display: none; } .AbsenceRequests .Table .TableItemsHolder .MobileTableItem{ display: block; } } /* filename: ../app/css/models/ImageGallery/ImageGallery.css */ .ImageGalleryTitleBar { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } .ImageGalleryTitleBar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .ImageGalleryTitleBar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } .ImageGalleryTitleBar .CloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; /*background-color: var(--color-white--);*/ transition: 0.1s; vertical-align: middle; /*border: 2px var(--color-black--) solid;*/ overflow: hidden; cursor: pointer; } .ImageGalleryTitleBar .CloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } .ImageGalleryLeftButton{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: calc(50% - 50px); left: 10px; width: 36px; height: 36px; background-image: url('/assets/images/icons/arrow_left_black.svg'); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; background-color: var(--color-white--); transition: 0.1s; opacity: 0.8; overflow: hidden; cursor: pointer; } .ImageGalleryLeftButton:hover{ background-size: 36px 36px; background-position: 0px 0px; } .ImageGalleryRightButton{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: calc(50% - 50px); right: 10px; width: 36px; height: 36px; background-image: url('/assets/images/icons/arrow_right_black.svg'); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; background-color: var(--color-white--); transition: 0.1s; opacity: 0.8; overflow: hidden; cursor: pointer; } .ImageGalleryRightButton:hover{ background-size: 36px 36px; background-position: 0px 0px; } .ImageGalleryInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 50px); overflow: hidden; } .ImageGalleryImageHolder { display: flex; flex-direction: column; align-items: center; /* Use flex-start to ensure the top of the image is always scrollable */ justify-content: flex-start; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 49px); background-color: var(--inner-holder-background-color--); overflow: auto; /* Required for the zoom scroll to work */ position: relative; } .ImageGalleryImageHolder img { display: block; margin: auto; /* This handles centering for both small and large states */ padding: 0px; width: 100%; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.4)); } .ImageGalleryTopInfoBar{ position: absolute; display: block; top: 4px; left: 0px; width: 100%; height: 36px; text-align: center; overflow: hidden; } .ImageGalleryTopInfoBar .ImageGalleryInfoHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 2px; padding-right: 2px; width: auto; max-width: 300px; height: 36px; background-color: var(--color-scheme-white--); border-radius: 18px; } .ImageGalleryTopInfoBar .ImageGalleryInfoHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; margin-top: 1px; padding: 0px; height: 30px; width: 30px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; border: 2px var(--color-white--) solid; border-radius: 16px; } .ImageGalleryTopInfoBar .ImageGalleryInfoHolder .SenderName{ position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 5px; padding-right: 5px; top: 0px; left: 0px; max-width: calc(100% - 30px); width: auto; height: 30px; font-family: var(--primary-font--); text-align: left; font-size: 16px; line-height: 30px; color: var(--primary-brand-color-blue--); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; overflow: hidden; cursor: pointer; } .ImageGalleryTopInfoBar .ImageGalleryInfoHolder .SenderName:hover{ color: var(--primary-brand-color-dark-blue--); } .ImageGalleryInnerHolder .BottomInfoBar{ position: absolute; display: block; width: 100%; height: 48px; bottom: 0px; left: 0px; background-color: rgba(255,255,255,0.9); border-top: 1px var(--color-light-gray--) solid; } .ImageGalleryInnerHolder .BottomInfoBar .Date{ position: absolute; display: block; margin: 5px; padding: 0px; bottom: 4px; left: 5px; max-width: 200px; width: auto; height: 30px; font-family: var(--primary-font--); text-align: left; font-size: 15px; line-height: 30px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; border-radius: 15px; overflow: hidden; } .ImageGalleryInnerHolder .BottomInfoBar .FileSize{ position: absolute; display: block; margin: 5px; padding: 0px; bottom: 4px; right: 5px; max-width: 100px; width: auto; height: 30px; font-family: var(--primary-font--); text-align: left; font-size: 15px; line-height: 30px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; border-radius: 15px; overflow: hidden; } .ImageGalleryInnerHolder .BottomInfoBar .ScaleTitle{ position: absolute; display: block; margin: 5px; padding: 0px; padding-left: 5px; padding-right: 5px; bottom: 5px; left: 0px; width: auto; height: 30px; font-family: var(--primary-font--); text-align: center; font-size: 16px; line-height: 30px; color: var(--color-black--); text-overflow: ellipsis; white-space: nowrap; background-color: var(--color-white--); overflow: hidden; cursor: pointer; } .ImageGalleryInnerHolder .BottomInfoBar .CurrentImageIndex{ position: absolute; display: block; margin: 5px; padding: 0px; bottom: 4px; left: calc(50% - 65px); width: 120px; height: 30px; font-family: var(--primary-font--); text-align: center; font-size: 16px; line-height: 30px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; border-radius: 15px; overflow: hidden; } /* filename: ../app/css/models/ChatGroupPicker/ChatGroupPickerDialog.css */ .ChatGroupPickerDialogHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; max-width: 800px; height: calc(100% - 53px); /*background-color: var(--color-white--);*/ } .ChatGroupPickerDialogHolder .TitleBar { position: relative; display: block; top: 0px; left: 0px; margin-top: 0px; margin-bottom: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } .ChatGroupPickerDialogHolder .TitleBar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .ChatGroupPickerDialogHolder .TitleBar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; } .ChatGroupPickerDialogHolder .TitleBar .CloseButton{ position: relative; display: inline-block; margin: 0 auto; margin-right: 5px; margin-left: 5px; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/close_white.svg'); background-size: 26px 26px; background-position: 2px 2px; background-repeat: no-repeat; /*background-color: var(--color-white--);*/ transition: 0.1s; vertical-align: middle; /*border: 2px var(--color-black--) solid;*/ overflow: hidden; cursor: pointer; } .ChatGroupPickerDialogHolder .TitleBar .CloseButton:hover{ background-size: 30px 30px; background-position: 0px 0px; } /**/ .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top: 30px; left: 0px; width: 340px; height: calc(100% - 50px); overflow: hidden; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .SearchBar{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 4px); height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border: 2px var(--color-white--) solid; overflow: hidden; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .SearchBar .GroupListIcon{ position: relative; display: inline-block; margin: 5px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-image: url('/assets/images/icons/users_white.svg'); background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .SearchBar .GroupListTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 210px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; vertical-align: middle; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); text-overflow: ellipsis; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .SearchBar .SearchField{ position: relative; display: inline-block; margin: 0px; margin-right: 5px; padding: 0px; top: 0px; left: 0px; width: 160px; height: 46px; vertical-align: middle; overflow: hidden; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .SearchBar .SearchField .SearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 8px; left: 15px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .SearchBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 10px; right: 4px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--primary-brand-color-light-blue--); cursor: pointer; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .SearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--primary-brand-color-blue--); } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .SearchBar .SearchField input[type=text]{ position: absolute; display: block; margin-left: 10px; margin-right: 10px; padding-left: 35px; padding-right: 38px; top: 5px; left: 0px; width: calc(100% - 10px); height: 36px; box-sizing: border-box; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; border: none; background-color: var(--color-white--); color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 18px; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .SearchBar .SearchField input[type=text]:focus{ outline: none; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder{ position: relative; display: block; width: calc(100% - 2px); min-height: 80px; max-height: calc(100% - 112px); height: auto; overflow-x: hidden; overflow-y: auto; background-color: var(--color-white--); border: 2px var(--color-white--) solid; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder .TableItem{ position: relative; display: block; width: calc(100% - 4px); height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; cursor: pointer; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder .EmptyListItem{ position: relative; display: block; width: calc(100% - 4px); height: 50px; text-align: left; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--color-dark-gray--); border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; cursor: pointer; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder .TableItem:hover{ background-color: var(--color-lighter-gray--); } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder .TableItem:first-child{ border-top: 1px var(--color-light-gray--) solid; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder .TableItem .CheckboxHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 50px; height: 50px; vertical-align: middle; pointer-events: none; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder .TableItem .CheckboxHolder .Checkbox{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 19px; left: 0px; cursor: pointer; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder .TableItem .ProfilePicture{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: 0px 0px; background-size: 40px 40px; vertical-align: middle; border-radius: 25px; border: 2px var(--color-white--) solid; overflow: hidden; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder .TableItem .ItemName{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: calc(100% - 125px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .GroupListTable .GroupListTableGroupsHolder .TableItem .ItemName_rtl{ text-align: right; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .ButtonsHolder{ position: relative; display: block; margin: 0 auto; padding-left: 1px; padding-right: 1px; padding-bottom: 2px; width: 338px; height: 44px; background-color: var(--color-white--); text-align: center; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .ButtonsHolder .Button{ position: relative; display: inline-block; margin: 0 auto; margin-left: 1px; margin-right: 1px; padding: 0px; width: calc(50% - 2px); height: 44px; vertical-align: middle; font-family: var(--primary-font--); font-size: 16px; line-height: 44px; text-align: center; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; background-color: var(--primary-brand-color-blue--); transition: 0.3s; cursor: pointer; } .ChatGroupPickerDialogHolder .ChatGroupPickerDialogInnerHolder .ButtonsHolder .Button:hover{ background-color: var(--primary-brand-color-dark-blue--); } /* filename: ../app/css/resources/fonts.css */ @font-face{ font-family:'example'; src: url('/assets/fonts/Roboto/example.otf'); src: url('/assets/fonts/example.otf#iefix') format('embedded-opentype'), url('/assets/fonts/example.woff') format('woff'), url('/assets/fonts/example.ttf') format('truetype'); } @font-face{ font-family:'Roboto'; src: url('/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype'); } @font-face{ font-family:'Roboto'; src: url('/assets/fonts/Roboto/Roboto-Bold.ttf') format('truetype'); font-style: normal; font-weight: bold; } @font-face{ font-family:'Roboto'; src: url('/assets/fonts/Roboto/Roboto-Italic.ttf') format('truetype'); font-style: italic; } @font-face{ font-family:'Teko'; src: url('/assets/fonts/Teko/Teko-Regular.ttf') format('truetype'); } @font-face{ font-family:'Teko-Regular'; src: url('/assets/fonts/Teko/Teko-Regular.ttf') format('truetype'); } @font-face{ font-family:'Ubuntu'; src: url('/assets/fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype'); } @font-face{ font-family:'Ubuntu-Regular'; src: url('/assets/fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype'); } @font-face{ font-family:'Permanent'; src: url('/assets/fonts/PermanentMarker/PermanentMarker-Regular.ttf') format('truetype'); } @font-face{ font-family:'PermanentMarker-Regular'; src: url('/assets/fonts/PermanentMarker/PermanentMarker-Regular.ttf') format('truetype'); } @font-face{ font-family:'LeckerliOne'; src: url('/assets/fonts/LeckerliOne/LeckerliOne-Regular.ttf') format('truetype'); } @font-face{ font-family:'LeckerliOne-Regular'; src: url('/assets/fonts/LeckerliOne/LeckerliOne-Regular.ttf') format('truetype'); } @font-face{ font-family:'NotoSansHebrew'; src: url('/assets/fonts/NotoSansHebrew/NotoSansHebrew-Bold.ttf') format('truetype'); font-style: normal; font-weight: bold; } @font-face{ font-family:'NotoSansHebrew'; src: url('/assets/fonts/NotoSansHebrew/NotoSansHebrew-Light.ttf') format('truetype'); font-style: normal; font-weight: light; } @font-face{ font-family:'NotoSansHebrew'; src: url('/assets/fonts/NotoSansHebrew/NotoSansHebrew-Regular.ttf') format('truetype'); } /* filename: ../app/css/variables.css */ :root{ /* Platform wide variables */ /* ======================= */ /* Platform wide strings */ --GLOBALS-ICONS-PATH--: "/assets/images/icons/"; /* Fonts */ --primary-brand-font--: 'LeckerliOne-Regular'; --primary-font--: 'Roboto'; --primary-text-color-dark-gray--: #2a2a2a; --primary-text-color-light-gray--: #706f6f; --primary-text-color-gray--: #3b3a3a; --primary-text-color-white--: #ffffff; --primary-text-color-brand-blue--:#2f95f5; /* Color Scheme */ /* Purple Scheme */ /* --color-scheme-l0--: #1a0130; --color-scheme-l1--: #3e0c69; --color-scheme-l2--: #64229d; --color-scheme-l3--: #984add; --color-scheme-l4--: #a060d7; --color-scheme-l5--: #ba79f2; */ /* Brown Scheme */ /* --color-scheme-l0--: #190801; --color-scheme-l1--: #972c05; --color-scheme-l2--: #ca3b07; --color-scheme-l3--: #ea6332; --color-scheme-l4--: #f98055; --color-scheme-l5--: #f1936a; */ --color-scheme-l0--: #ffffff; --color-scheme-l1--: #2f95f5; --color-scheme-l2--: #a2a2ad; --color-scheme-l3--: #3d3d3d; --color-scheme-l4--: #a3d5ff; --color-scheme-l5--: #c5e4f8; --color-scheme-white--: #ffffff; --color-scheme-black--: #000000; --color-scheme-gray-l0--: #f8fafd; --color-scheme-gray-l1--: #f0f0f0; --color-scheme-gray-l2--: #e0e0e0; --color-scheme-gray-l3--: #919191; --color-scheme-gray-l4--: #606060; --color-scheme-gray-l5--: #303030; --color-scheme-blue-l1--: #0e66b9; --color-scheme-blue-l2--: #2f95f5; --color-scheme-blue-l3--: #8ec7fc; --color-scheme-blue-l4--: #90c4f4; --color-scheme-blue-l5--: #a3d5ff; --color-scheme-blue-l6--: #e6f0f9; /* General Colors */ --primary-brand-color--: var(--color-scheme-blue-l2--); /* Global application variables */ --application-container-background-image--: '';/*linear-gradient(to bottom right,#ffffff, #ffffff);*/ --application-container-background-image-rtl--: '';/*linear-gradient(to bottom right,#ffffff, #ffffff);*/ --application-container-background-color--: var(--color-scheme-white--); --application-title-bar-background-color--: var(--color-scheme-white--); --application-title-bar-border-color--: var(--color-scheme-gray-l2--); --application-titlebar-logo-text-color--: var(--primary-text-color-brand-blue--); --application-title-bar-button-text-color--: var(); --application-title-bar-button-background-color--: var(--color-scheme-blue-l6--); --application-title-bar-button-hover-background-color--: var(--color-scheme-blue-l2--); --application-title-bar-language-button-flag-background-color--: var(--color-scheme-white--); --application-title-bar-language-button-initials-text-color--: var(--primary-text-color-dark-gray--); --application-title-bar-language-button-menu-background-color--: var(--color-scheme-white--); --application-title-bar-language-menu-button-background-color--: var(--color-scheme-white--); --application-title-bar-language-menu-button-border-color--: var(--color-scheme-gray-l2--); --application-title-bar-language-menu-button-hover-background-color--: var(--color-scheme-blue-l2--); /* Desktop Navigation Menu */ --desktop-navigation-menu-background-color--: ''; --desktop-navigation-menu-border-color--: var(--color-scheme-gray-l2--); --desktop-navigation-menu-top-bar-background-color--: var(--color-scheme-blue-l2--); --desktop-navigation-menu-top-bar-border-color--: var(--color-scheme-blue-l3--); --desktop-navigation-menu-item-placeholder-background-color--: var(--color-scheme-gray-l2--); --desktop-navigation-menu-item-title-text-color--: var(--primary-text-color-dark-gray--); --desktop-navigation-menu-item-icon-color--: black; --desktop-navigation-menu-item-hover-background-color--: var(--color-scheme-gray-l1--); --desktop-navigation-menu-item-selected-background-color--: var(--color-scheme-blue-l6--); --desktop-navigation-menu-welcome-text-background-color--: var(--color-scheme-blue-l3--); --desktop-navigation-menu-welcome-text-color--: var(--color-scheme-white--); --desktop-navigation-menu-shift-info-holder-background-color--: var(--color-scheme-blue-l2--); --desktop-navigation-menu-scrollbar-color--: '';/*var(--color-scheme-l3--) var(--color-scheme-l2--);*/ /* Mobile Navigation Menu */ --mobile-navigation-menu-background-color--: var(--color-scheme-white--); --mobile-navigation-menu-border-color--: var(--color-scheme-gray-l2--); --mobile-navigation-menu-top-bar-background-color--: var(--color-scheme-blue-l2--); --mobile-navigation-menu-top-bar-border-color--: var(--color-scheme-blue-l3--); --mobile-navigation-menu-item-placeholder-background-color--: var(--color-scheme-gray-l1--); --mobile-navigation-menu-item-title-text-color--: var(--primary-text-color-dark-gray--); --mobile-navigation-menu-item-icon-color--: black; --mobile-navigation-menu-item-active-background-color--: var(--color-scheme-gray-l1--); --mobile-navigation-menu-item-selected-background-color--: var(--color-scheme-blue-l6--); --mobile-navigation-menu-welcome-text-background-color--: var(--color-scheme-blue-l3--); --mobile-navigation-menu-welcome-text-color--: var(--color-scheme-white--); --mobile-navigation-menu-shift-info-holder-background-color--: var(--color-scheme-blue-l2--); --mobile-navigation-menu-scrollbar-color--: '';/*var(--color-scheme-l3--) var(--color-scheme-l2--);*/ /* Content Container */ --content-container-background-color--: var(--color-scheme-white--); /* Views Container */ --views-container-background-color--: var(--color-scheme-gray-l1--); --views-container-border-color--: var(--color-scheme-gray-l2--); --views-container-border-radius--: 0px; /* View */ --view-background-color--: var(--color-scheme-gray-l1---); --view-inner-menu-border-color--: var(--color-scheme-gray-l2--); /* Titlebar */ --titlebar-background-color--: var(--color-scheme-l1--); --titlebar-border-color--: var(--color-scheme-blue-l3--); --titlebar-title-text-color--: var(--color-scheme-white--); /* InnerHolder */ --inner-holder-background-color--: var(--color-scheme-gray-l0--); --inner-holder-boder-color--: var(--color-scheme-gray-l1--); /* Searchbar */ --searchbar-background-color--: var(--color-scheme-white--); --searchbar-border-color--: var(--color-scheme-gray-l1--); /* Views */ /* Settings View */ --settings-view-settings-menu-background-color--: var(--color-scheme-gray-l0--); --settings-view-settings-menu-border-color--: var(--color-scheme-gray-l2--); --settings-view-settings-menu-title-item-background-color--: var(--color-scheme-blue-l2--); --settings-view-settings-menu-title-item-text-color--: var(--color-scheme-white--); --settings-view-settings-menu-item-text-color--: var(--primary-text-color-dark-gray--); --settings-view-settings-menu-item-icon-color--: black; --settings-view-settings-menu-space-background-color--: var(--color-scheme-gray-l1--); --settings-view-settings-menu-item-selected-background-color--: var(--color-scheme-blue-l6--); --settings-view-settings-menu-item-hover-background-color--: var(--color-scheme-gray-l1--); --settings-view-settings-menu-scrollbar-color--: '';/*var(--color-scheme-l1--) var(--color-scheme-l3--);*/ --settings-view-settings-menu-searchfield-backgroud-color--: var(--color-scheme-gray-l1--); /* Directory View */ --directory-view-contact-address-book-background-color--: var(--color-scheme-gray-l0--); --directory-view-contact-details-background-color--: var(--color-scheme-gray-l1--); --directory-view-contact-sheet-background-color--: var(--color-scheme-white--); /* Chat View */ --chat-view-contacts-holder-background-color--: var(--color-scheme-gray-l0--); --chat-view-messages-inner-holder-background-color--: linear-gradient(178.6deg, rgb(232, 245, 253) 3.3%, rgb(252, 253, 255) 109.6%); /* Chat Call View */ --chat-call-view-inner-holder-background-color--: var(--color-scheme-black--); /* Calendar Invite Status Labels */ --calendar-invite-status-accepted-background--: #e6f4ea; --calendar-invite-status-accepted-text--: #1e8e3e; --calendar-invite-status-tentative-background--: #fef7e0; --calendar-invite-status-tentative-text--: #f29900; --calendar-invite-status-declined-background--: #fce8e6; --calendar-invite-status-declined-text--: #d93025; --calendar-invite-status-pending-background--: var(--color-scheme-gray-l1--); --calendar-invite-status-pending-text--: #5f6368; /* Menus */ --menu-border-color--: var(--color-scheme-gray-l1--); --menu-item-title-text-color--: #2a2a2a; --menu-item-selected-background-color--: #a4d2fc; --menu-item-hover-background-color--: var(--color-scheme-gray-l12); /* Toggle Switch */ --toggle-switch-border-color--: var(--color-scheme-white--); --toggle-switch-background-color--: var(--color-scheme-blue-l2--); --toggle-switch-active-background-color--: var(--color-scheme-blue-l2--); --toggle-switch-hover-background-color--: var(--color-scheme-blue-l1--); --toggle-switch-active-hover-background-color--: var(--color-scheme-blue-l1--); --toggle-switch-text-color--: var(--color-scheme-white--); --toggle-switch-active-text-color--: var(--color-scheme-white--); /* Dashboard */ --dashboard-widget-titlebar-background-color--: var(--color-scheme-l1--); --dashboard-widget-titlebar-itle-text-color--: var(--color-scheme-white--); /* Widgets */ --clock-widget-backgound-color--: var(--color-scheme-l1--); --clock-widget-foregound-color--: var(--color-scheme-white--); /* Old CSS Definitions */ --primary-brand-color-blue--: #2f95f5; --primary-brand-color-light-blue--: #90c4f4; --primary-brand-color-ligher-blue--: #b0d2f1; --primary-brand-color-dark-blue--: #105ba1; --primary-brand-color-darker-blue--: #2555df; --primary-brand-color-darkest-blue--: #253a79; --color-black--: #000000; --color-dark-gray--: #2a2a2a; --color-heavier-gray--: #4b4b4b; --color-heavy-gray--: #919191; --color-gray--: #504e4e; --color-light-gray--: #e0e0e0; --color-lighter-gray--: #f0f0f0; --color-superlight-gray--:#f8fafd; --color-light-blue--: #e6f0f9; --color-white--: #ffffff; --color-purple--: #800995; --color-red--: #b60808; --color-dark-red--: #6a0606; --color-button-red--: #b60808; --color-button-dark-red--: #6a0606; --color-green--: #08b60b; --color-button-green--: #08b60b; --color-button-dark-green--: #008426; --color-scheme-yellow--: #ffdd00; --color-border-gray--: #e1e1e1; --color-button-gray--: #ababab; --color-button-dark-gray--: #9a9a9a; --color-button-dark-gray-active--: #504e4e; --color-button-blue--: #2f95f5; --color-button-dark-blue--: #105ba1; --color-widget-blue--: #2e5a97; --color-menu-button-selected-blue--: #bfe1ff; --color-form-input-items-background-gray--: #f9f9f9; --color-menu-title-gray--: #439cee; --color-recorder-button-red--: #b60808; --color-recorder-button-dark-red--: #6a0606; --color-recorder-button-green--: #08b60b; --color-recorder-button-dark-green--: #015018; --color-chat-bubble-green--: #9afc8c; --color-start-shift-button-green--: #08b60b; --color-task-overdue--: #fbe6e6; --color-unread-message-green--: #08b60b; --color-form-completed-green--: #88f08aba; --form-validation-color-red--: #b60808; } /* filename: ../app/css/views/LoginView.css */ #LoginView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; font-family: var(--primary-font--); text-align: center; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #LoginView .LoginForm{ position: relative; display: block; margin: 0 auto; top: calc(50% - 350px); padding: 0px; width: 600px; height: 600px; } #LoginView .LoginForm .LoginTitle{ position: relative; display: block; margin: 0 auto; margin-top:40px; margin-bottom: 30px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-brand-font--); font-size: 40px; line-height: 40px; text-align: center; color: var(--primary-brand-color-blue--); } #LoginView .LoginForm .LoginPanel{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 30px; padding: 50px; width: 500px; height: 360px; font-size: 12px; line-height: 20px; text-align: center; color: var(--primary-text-color-dark-gray--); background-color: #ffffff; border-radius: 20px; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } #LoginView .LoginForm .LoginPanel .ErrorMessageHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 20px; padding: 0px; width: 85%; min-height: 60px; height: auto; font-size: 20px; line-height: 28px; text-align: center; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); } #LoginView .LoginForm .LoginPanel input[type=text], #LoginView .LoginForm .LoginPanel input[type=password]{ position: relative; display: block; width: 100%; height: 50px; padding: 12px 20px; margin: 20px 0; box-sizing: border-box; font-size: 18px; line-height: 38px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; } #LoginView .LoginForm .LoginPanel input[type=text]:focus, #LoginView .LoginForm .LoginPanel input[type=password]:focus { background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } #LoginView .LoginForm .LoginPanel .LoginButton{ position: relative; display: inline-block; width: 80%; height: 50px; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; font-size: 18px; line-height: 25px; border: 1px var(--primary-brand-color-blue--) solid; border-radius: 30px; background-color: var(--primary-brand-color-blue--); color: #ffffff; cursor: pointer; transition: 0.3s; } #LoginView .LoginForm .LoginPanel .LoginButton:hover{ background-color: var(--primary-brand-color-dark-blue--); transition: 0.3s; } #LoginView .LoginForm .LoginPanel .ResetPasswordButton{ position: relative; display: inline-block; width: 100%; height: 40px; padding: 12px 20px; margin: 18px 0; box-sizing: border-box; font-size: 16px; line-height: 20px; color: #000000; border-top: 1px var(--color-light-gray--) solid; cursor: pointer; transition: 0.3s; } #LoginView .LoginForm .LoginPanel .ResetPasswordButton:hover{ color: var(--primary-brand-color-blue--); transition: 0.3s; } @media only screen and (max-height: 755px) { #LoginView { overflow-y: auto; } #LoginView .LoginForm{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; width: 100%; height: auto; min-height: 100%; overflow: hidden; } } @media only screen and (max-width: 780px) { #LoginView{ background-color: var(--color-scheme-white--); } #LoginView .LoginForm{ position: relative; display: block; margin: 0 auto; top: 0px; padding: 0px; width: 100%; height: auto; overflow: hidden; } #LoginView .LoginForm .LoginTitle{ position: relative; display: block; margin: 0px; padding: 0px; top: 30px; left: 0px; width: 100%; font-size: 36px; z-index: 1000; } #LoginView .LoginForm .LoginPanel{ position: relative; display: block; margin: 0px; padding: 0px; padding: 20px; top: 0px; left: 0px; width: calc(100% - 40px); height: calc(100% - 100px); border-radius: 0px; filter: unset; border: none; } #LoginView .LoginForm .LoginPanel .ErrorMessageHolder{ font-size: 18px; line-height: 22px; margin-top: 30px; margin-bottom: 0px; } } /* filename: ../app/css/views/settings/LocationeditorView.css */ #LocationeditorView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--color-lighter-gray--); container-name: LocationeditorView; container-type: inline-size; } #LocationeditorView .LocationeditorViewTitlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #LocationeditorView .LocationeditorViewTitlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #LocationeditorView .LocationeditorViewTitlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #LocationeditorView .LocationeditorViewTitlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #LocationeditorView .LocationeditorViewTitlebar .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #LocationeditorView .LocationeditorViewTitlebar .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #LocationeditorView .LocationeditorViewTitlebar .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #LocationeditorView .LocationeditorViewTitlebar .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #LocationeditorView .LocationeditorViewTitlebar .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #LocationeditorView .LocationeditorViewInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-superlight-gray--); overflow-x: hidden; overflow-y: auto; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; padding-top: 10px; padding-left: 200px; padding-right: 200px; padding-bottom: 20px; top: 0px; left: 0px; width: 400px; height: auto; min-height: calc(100% - 30px); text-align: left; background-color: var(--color-white--); } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder .TopOfPageIcon{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; width: 50px; height: 50px; background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder .LocationeditorViewLocationIDTitle{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder .InputTitle{ position: relative; display: block; margin: 0px; margin-top: 10px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder input[type=text]{ position: relative; display: block; padding: 10px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; box-sizing: border-box; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; transition: 0.2s; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder #LocationeditorViewLocationAddress{ margin-bottom: 20px; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder .CurrentLocationButton{ position: relative; display: block; margin: 0 auto; margin-left: calc(100% - 240px); margin-top: 20px; padding: 0px; top: 0px; left: 0px; width: 240px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-white--); text-overflow: ellipsis; white-space: nowrap; background-color: var(--primary-brand-color-blue--); border-radius: 25px; overflow: hidden; transition: 0.2s linear; cursor: pointer; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder .CurrentLocationButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder .ShowOnMapButton{ position: relative; display: block; margin: 0 auto; margin-left: calc(100% - 240px); margin-top: 20px; padding: 0px; top: 0px; left: 0px; width: 240px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-white--); text-overflow: ellipsis; white-space: nowrap; background-color: var(--primary-brand-color-blue--); border-radius: 25px; overflow: hidden; transition: 0.2s linear; cursor: pointer; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder .ShowOnMapButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder #LocationeditorViewLocationLongitudeDistance{ margin-bottom: 20px; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder #LocationeditorViewMapHolder{ position: relative; display: block; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; padding: 0px; top: 0px; left: 0px; width: 400px; height: 400px; background-color: var(--color-superlight-gray--); background-position: center; background-size: cover; border: 1px var(--color-lighter-gray--) solid; border-radius: 10px; overflow: hidden; } @container LocationeditorView (width < 800px) { #LocationeditorView .LocationeditorViewInnerHolder { background-color: var(--color-white--); } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder { padding: 0px; padding-top: 10px; width: 400px; } } @media only screen and (max-width: 700px) { #LocationeditorView .LocationeditorViewTitlebar .Title{ width: calc(100% - 86px) !important; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder{ width: calc(100% - 20px); } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder .InputTitle{ margin-top: 5px; } #LocationeditorView .LocationeditorViewInnerHolder .FormHolder #LocationeditorViewMapHolder{ width: 330px; height: 330px; } } /* filename: ../app/css/views/settings/TasksmanagementView.css */ #TasksmanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: TasksmanagementView; container-type: inline-size; } #TasksmanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #TasksmanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #TasksmanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #TasksmanagementView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #TasksmanagementView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #TasksmanagementView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #TasksmanagementView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #TasksmanagementView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #TasksmanagementView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #TasksmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #TasksmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #TasksmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #TasksmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #TasksmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #TasksmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #TasksmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #TasksmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #TasksmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #TasksmanagementView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #TasksmanagementView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #TasksmanagementView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #TasksmanagementView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #TasksmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #TasksmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @media only screen and (max-width: 700px) { #TasksmanagementView .Titlebar .Title{ width: calc(100% - 126px) !important; } } @media only screen and (max-width: 780px) { #TasksmanagementView .InnerHolder{ height: calc(100% - 40px); } #TasksmanagementView .Searchbar{ height: 50px; } #TasksmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #TasksmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #TasksmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #TasksmanagementView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #TasksmanagementView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #TasksmanagementView .Searchbar .SearchBarHolder .Space2{ width: 0px; } #TasksmanagementView .Table{ margin:0px; width: 100%; height: calc(100% - 50px); } } /* filename: ../app/css/views/settings/EventeditorView.css */ #EventeditorView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--color-lighter-gray--); } #EventeditorView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #EventeditorView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #EventeditorView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 70px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: left; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #EventeditorView .Titlebar .TitleMenuButton{ position: absolute; display: block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 30px; background-position: 0px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #EventeditorView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #EventeditorView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #EventeditorView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #EventeditorView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #EventeditorView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #EventeditorView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-white--); overflow: hidden; } @media only screen and (max-width: 700px) { #EventeditorView .Titlebar .Title{ width: calc(100% - 86px) !important; } } /* filename: ../app/css/views/settings/GroupmanagementView.css */ #GroupmanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: GroupmanagementView; container-type: inline-size; } #GroupmanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #GroupmanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #GroupmanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #GroupmanagementView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #GroupmanagementView .Titlebar .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #GroupmanagementView .Titlebar .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #GroupmanagementView .Titlebar .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #GroupmanagementView .Titlebar .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #GroupmanagementView .Titlebar .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #GroupmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-white--); overflow: hidden; } #GroupmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #GroupmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #GroupmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin: 0 auto; margin-left:10px; width: 220px; height: 40px; vertical-align: top; } #GroupmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #GroupmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #GroupmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #GroupmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #GroupmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #GroupmanagementView .Searchbar .Space{ position: relative; display: inline-block; width: calc(100% - 243px); height: 40px; vertical-align: middle; } #GroupmanagementViewTablesHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 51px); background-color: var(--color-superlight-gray--); overflow-x:hidden; overflow-y: auto; } #GroupmanagementViewDepartmentsTableHolder{ position: relative; display: block; margin: 0 auto; padding-bottom: 4px; width: 100%; height: auto; background-color: var(--color-lighter-gray--); } #GroupmanagementViewDepartmentsTitleHolder{ position: relative; display: block; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--primary-brand-color-blue--) solid; } #GroupmanagementViewDepartmentsTitle{ position: relative; display: inline-block; width: calc(100% - 282px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-white--); border-bottom: 1px var(--primary-brand-color-blue--) solid; } #GroupmanagementViewDepartmentsTable{ position: relative; display: block; width: 100%; height: auto; text-align: left; } #GroupmanagementViewTeamsTableHolder{ position: relative; display: block; margin: 0 auto; width: 100%; height: auto; } #GroupmanagementViewTeamsTitleHolder{ position: relative; display: block; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 50px; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--primary-brand-color-blue--) solid; } #GroupmanagementViewTeamsTitle{ position: relative; display: inline-block; width: calc(100% - 282px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; font-weight: bold; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); background-color: var(--color-white--); } #GroupmanagementViewTeamsTable{ position: relative; display: block; width: 100%; height: auto; text-align: left; background-color: var(--color-lighter-gray--); } .GroupmanagementViewTeamsTable_rtl{ text-align: right !important; } #GroupmanagementView .InfoHolder{ position: relative; display: inline-block; margin-left:5px; margin-right:5px; top: 0px; left: 0px; width: 270px; height: 38px; vertical-align: middle; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); border: 1px var(--color-light-gray--) solid; border-radius: 20px; } #GroupmanagementView .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #GroupmanagementView .TableItem{ position: relative; display: block; margin: 0px; padding: 0px; width: 100%; height: 50px; text-align: inherit; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; } #GroupmanagementView .TableItem:hover{ background-color: var(--color-lighter-gray--); border-bottom: 1px var(--color-light-gray--) solid; } #GroupmanagementView .TableItem .ItemID{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 20px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #GroupmanagementView .TableItem .ItemTitle{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 140px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #GroupmanagementView .TableItem .ItemDescription{ position: relative; display: inline-block; width: calc(100% - 222px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* */ #GroupmanagementView .TableItem .MenuButton{ position: relative; display: inline-block; margin: 0px; margin-top: 3px; padding: 0px; top: 0px; right: 0px; height: 50px; width: 20px; vertical-align: middle; background-position: 0px 3px; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } #GroupmanagementView .TableItem .MenuButton .TableItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 48px; left: -162px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } .TableItemMenu_rtl{ left: 0px !important; } #GroupmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #GroupmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #GroupmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #GroupmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } /* */ #GroupmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #GroupmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @container GroupmanagementView (max-width: 780px){ #GroupmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #GroupmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #GroupmanagementView .Searchbar .SearchBarHolder .Space{ width: 0px; } } @media only screen and (max-width: 700px) { #GroupmanagementView .Titlebar .Title{ width: calc(100% - 126px) !important; } } @media only screen and (max-width: 780px) { #GroupmanagementView .Searchbar{ height: 50px; } #GroupmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #GroupmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #GroupmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #GroupmanagementView .Searchbar .SearchBarHolder .Space{ width: 0px; } #GroupmanagementView .InnerHolder #GroupmanagementViewTablesHolder{ padding-top: 0px; width: 100%; } #GroupmanagementView .InnerHolder #GroupmanagementViewTablesHolder #GroupmanagementViewDepartmentsTitle{ border-radius: 0px; } #GroupmanagementView .InnerHolder #GroupmanagementViewTablesHolder #GroupmanagementViewTeamsTitle{ border-radius: 0px; } #GroupmanagementView .Table{ margin:0px; width: 100%; height: calc(100% - 50px); } #GroupmanagementView .TableItem .ItemTitle{ width: calc(100% - 86px); } #GroupmanagementView .TableItem .ItemDescription{ display: none; } #GroupmanagementViewDepartmentsTitle{ width: 100%; } #GroupmanagementViewTeamsTitle{ width: 100%; } #GroupmanagementView .InfoHolder{ display: none; } } /* filename: ../app/css/views/settings/PositionsmanagementView.css */ #PositionsmanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: PositionsmanagementView; container-type: inline-size; } #PositionsmanagementView > .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #PositionsmanagementView > .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #PositionsmanagementView > .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #PositionsmanagementView > .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #PositionsmanagementView > .Titlebar .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #PositionsmanagementView > .Titlebar .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #PositionsmanagementView > .Titlebar .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #PositionsmanagementView > .Titlebar .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #PositionsmanagementView > .Titlebar .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #PositionsmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-white--); overflow: hidden; } #PositionsmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #PositionsmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #PositionsmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin: 0 auto; margin-left:10px; width: 220px; height: 40px; vertical-align: top; } #PositionsmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #PositionsmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #PositionsmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #PositionsmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #PositionsmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #PositionsmanagementView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #PositionsmanagementView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #PositionsmanagementViewTablesHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 51px); background-color: var(--color-superlight-gray--); overflow: hidden; } #PositionsmanagementViewPositionsTableHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; background-color: var(--color-superlight-gray--); } #PositionsmanagementViewPositionsTitleHolder{ position: relative; display: block; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--primary-brand-color-blue--) solid; } #PositionsmanagementViewPositionsTitle{ position: relative; display: inline-block; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-white--); border-bottom: 1px var(--primary-brand-color-blue--) solid; } #PositionsmanagementViewPositionsTable{ position: relative; display: block; width: 100%; height: calc(100% - 51px); text-align: left; overflow-x: hidden; overflow-y: auto; } .PositionsmanagementViewPositionsTable_rtl{ text-align: right !important; } #PositionsmanagementViewPositionsTable .EmptyTableItem{ position: relative; display: block; top: calc(50% - 50px); left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; } #PositionsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #PositionsmanagementView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #PositionsmanagementView .TableItem{ position: relative; display: block; margin: 0px; padding: 0px; width: 100%; height: 50px; text-align: inherit; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; } #PositionsmanagementView .TableItem:hover{ background-color: var(--color-lighter-gray--); border-bottom: 1px var(--color-light-gray--) solid; } #PositionsmanagementView .TableItem .ItemID{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 20px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #PositionsmanagementView .TableItem .ItemTitle{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 200px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #PositionsmanagementView .TableItem .ItemDescription{ position: relative; display: inline-block; width: calc(100% - 282px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* */ #PositionsmanagementView .TableItem .MenuButton{ position: relative; display: inline-block; margin: 0px; margin-top: 3px; padding: 0px; top: 0px; right: 0px; height: 50px; width: 20px; vertical-align: middle; background-position: 0px 3px; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } #PositionsmanagementView .TableItem .MenuButton .TableItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 48px; left: -162px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } .TableItemMenu_rtl{ left: 0px !important; } #PositionsmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #PositionsmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #PositionsmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #PositionsmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #PositionsmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #PositionsmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @container PositionsmanagementView (max-width: 780px){ #PositionsmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #PositionsmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #PositionsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #PositionsmanagementView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #PositionsmanagementView .Searchbar .SearchBarHolder .Space2{ width: 0px; } } @media only screen and (max-width: 700px) { #PositionsmanagementView > .Titlebar .Title{ width: calc(100% - 126px) !important; } } @media only screen and (max-width: 780px) { #PositionsmanagementView .Searchbar{ height: 50px; } #PositionsmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #PositionsmanagementView .InnerHolder #PositionsmanagementViewTablesHolder{ padding-top: 0px; width: 100%; } #PositionsmanagementView .TableItem .ItemTitle{ width: calc(100% - 86px); } #PositionsmanagementView .TableItem .ItemDescription{ display: none; } #PositionsmanagementViewPositionsTitle{ width: 100%; } #PositionsmanagementView .InfoHolder{ display: none; } } /* filename: ../app/css/views/settings/SettingsView.css */ #SettingsView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: left; overflow:hidden; background-color: var(--view-background-color--); } #SettingsView .SettingsMenu .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #SettingsView .SettingsMenu .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #SettingsView .SettingsMenu .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #SettingsView .SettingsDetails{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(100% - 261px); height: 100%; vertical-align: top; transform: translateZ(0); /* safari fix for drop shadow */ } #SettingsView .SettingsDetails .SettingsDetailsTitleBar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #SettingsView .SettingsDetails .SettingsDetailsInnerHolder{ position: relative; display: block; margin:0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; overflow-y: auto; } #SettingsView .SettingsDetails .SettingsDetailsPlaceholderText{ position: absolute; display: block; padding: 0px; margin: 0px; top: calc(50% - 25px); left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); text-align: center; unicode-bidi: plaintext; font-size: 16px; line-height: 20px; color: var(--primary-text-color-gray--); line-break: auto; overflow: hidden; } #SettingsView .SettingsMenu{ position: relative; display: inline-block; top: 0px; left: 0px; width: 260px; height: 100%; vertical-align: top; background-color: var(--settings-view-settings-menu-background-color--); border-right: 1px var(--settings-view-settings-menu-border-color--) solid; overflow: hidden; } #SettingsView .SettingsMenu_rtl{ border-right: unset; border-left: 1px var(--settings-view-settings-menu-border-color--) solid; } #SettingsView .SettingsMenu .SearchBar{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; overflow: hidden; } #SettingsView .SettingsMenu .SearchBar .SearchField input[type=text]{ position: relative; display: block; padding-left: 40px; padding-right: 40px; margin-left: 10px; margin-right: 10px; margin-top: 5px; width: calc(100% - 20px); height: 40px; box-sizing: border-box; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #SettingsView .SettingsMenu .SearchBar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #SettingsView .SettingsMenu .SearchBar .SearchField .SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 10px; left: 16px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #SettingsView .SettingsMenu .SearchBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 12px; right: 16px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #SettingsView .SettingsMenu .SearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #SettingsView .SettingsMenu .SettingsList{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: calc(100% - 103px); overflow-x: hidden; overflow-y: auto; scrollbar-color: var(--settings-view-settings-menu-scrollbar-color--); scrollbar-width: thin; } #SettingsView .SettingsMenu .MenuItem{ position: relative; display: block; margin: 5px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 40px; overflow:hidden; text-align: left; transition: 0.2s linear; border-radius: 20px; cursor: pointer; } #SettingsView .SettingsMenu .MenuItem:active{ background-color: var(--color-light-blue--) !important; } #SettingsView .SettingsMenu .MenuItemSelected{ background-color: var(--settings-view-settings-menu-item-selected-background-color--) !important; } #SettingsView .SettingsMenu .MenuItem .Icon{ position: relative; display: inline-block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; left: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; } #SettingsView .SettingsMenu .MenuItem .Title{ position: relative; display: inline-block; width: calc(100% - 50px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--settings-view-settings-menu-item-text-color--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #SettingsView .SettingsMenu .MenuTitle{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: 40px; line-height: 40px; overflow:hidden; text-align: left; background-color: var(--settings-view-settings-menu-title-item-background-color--); } #SettingsView .SettingsMenu .MenuTitle .Icon{ position: relative; display: inline-block; margin: 0px; margin-top: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; left: 0px; height: 25px; width: 25px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; } #SettingsView .SettingsMenu .MenuTitle .Title{ position: relative; display: inline-block; margin-top: 0px; width: calc(100% - 45px); height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--settings-view-settings-menu-title-item-text-color--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #SettingsView .SettingsMenu .Space{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: 1px; overflow:hidden; background-color: var(--settings-view-settings-menu-space-background-color--); } #SettingsView .TitleBarMobileBackButton{ position: relative; display: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 40px; height: 50px; vertical-align: middle; background-image:url('assets/images/icons/arrow_back_white.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 5px 10px; cursor: pointer; overflow: hidden; } #SettingsView .TitleBarMobileBackButton:hover{ background-image:url('assets/images/icons/arrow_back_white.svg'); } .TitleBarMobileBackButton_rtl{ background-image:url('assets/images/icons/arrow_back_white.svg') !important; } @media only screen and (hover: hover) and (min-width: 781px){ #SettingsView .SettingsMenu .MenuItem:hover{ background-color: var(--settings-view-settings-menu-item-hover-background-color--) !important; } } @media only screen and (max-width: 700px) { #SettingsView .SettingsMenu{ width: 100%; border: 0px; } #SettingsView .SettingsDetails{ display: none; width: 100%; overflow-x: hidden; overflow-y: auto; } } @media only screen and (min-width: 701px) and (max-width: 1000px){ #SettingsView .SettingsDetails{ overflow-x: hidden; overflow-y: auto; } } @media only screen and (min-width: 1001px){ } /* filename: ../app/css/views/settings/AboutView.css */ #AboutView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; background-color: var(--view-background-color--); overflow: hidden; } #AboutView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #AboutView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #AboutView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #AboutView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: center; background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #AboutView .InnerHolder .InfoHolder{ position: relative; display: block; margin: 0 auto; padding: 0px 20px 20px 20px; width: auto; max-width: 800px; height: auto; min-height: calc(100% - 20px); text-align: left; background-color: var(--color-scheme-white--); } #AboutView .InnerHolder .InfoHolder .TitleText{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 20px); height: 60px; font-family: var(--primary-brand-font--); font-size: 24px; line-height: 60px; text-align: start; unicode-bidi: plaintext; font-weight: bold; color: var(--primary-text-color-brand-blue--); border-bottom: 1px var(--color-gray--) solid; } #AboutView .InnerHolder .InfoHolder .InfoSection{ position: relative; display: inline-block; margin: 5px; margin-top: 10px; padding: 10px; padding-left: 20px; padding-right: 20px; width: calc(100% - 50px); height: auto; background-color: var(--color-scheme-gray-l0--); border-radius: 10px; } #AboutView .InnerHolder .InfoHolder .InfoSection .InfoSectionTitle{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; unicode-bidi: plaintext; font-weight: bold; color: var(--primary-text-color-dark-gray--); } #AboutView .InnerHolder .InfoHolder .InfoSection .InfoSectionText{ position: relative; display: block; margin: 0 auto; margin-bottom: 10px; padding: 0px; width: 100%; height: auto; font-family: var(--primary-font--); font-size: 15px; line-height: 22px; text-align: inherit; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); } #AboutView .InnerHolder .InfoTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50%; height: auto; font-family: var(--primary-font--); font-size: 15px; line-height: 30px; text-align: inherit; unicode-bidi: plaintext; font-weight: bold; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #AboutView .InnerHolder .InfoText{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50%; height: auto; font-family: var(--primary-font--); font-size: 15px; line-height: 22px; text-align: inherit; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #AboutView .InnerHolder .InfoLineTitle{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; font-family: var(--primary-font--); font-size: 15px; line-height: 22px; text-align: inherit; unicode-bidi: plaintext; font-weight: bold; color: var(--primary-text-color-dark-gray--); } #AboutView .InnerHolder .InfoLine{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; font-family: var(--primary-font--); font-size: 14px; line-height: 22px; text-align: inherit; unicode-bidi: plaintext; overflow-wrap: break-word; word-break: break-word; color: var(--primary-text-color-dark-gray--); } #AboutView .InnerHolder .InfoSection .InfoSectionQRCode{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; padding: 20px; width: 240px; height: 240px; text-align: center; background-color: var(--color-scheme-gray-l1--); border-radius: 15px; overflow: hidden; } #AboutView .InnerHolder .InfoSection .DownloadButton{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; padding: 0px; width: 80px; height: 80px; background-size: 60px 60px; background-repeat: no-repeat; background-position: 10px 10px; cursor: pointer; overflow: hidden; } @media only screen and (max-width: 700px) { #AboutView .Titlebar .Title{ width: calc(100% - 90px); } #AboutView .InnerHolder .InfoHolder{ padding: 0px 5px 5px 5px; width: calc(100% - 10px); min-height: calc(100% - 5px); } #AboutView .InnerHolder .InfoHolder .TitleText{ display: none; } } /* filename: ../app/css/views/settings/ProfileView.css */ #ProfileView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); container-name: ProfileView; container-type: inline-size; } #ProfileView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #ProfileView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #ProfileView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #ProfileView #ProfileHolder{ position: relative; display: block; margin:0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; overflow-y: auto; } #ProfileView #ProfileInnerHolder{ position: relative; display: block; top: 0; left: 0; margin: 0 auto; padding: 0px 20px 20px 20px; max-width: 800px; min-height: calc(100% - 43px); height: auto; background-color: var(--color-scheme-white--); text-align: center; overflow: hidden; transition: 0.3s; } #ProfilePictureContainer{ position: relative; display: block; margin: 0 auto; width: 600px; height: auto; text-align: center; } #ProfileInfoText{ position: relative; display: block; margin-top: 20px; margin-bottom: 20px; top: 0px; left: 10px; right: 10px; width: calc(100% - 20px); height: 40px; font-family: var(--primary-font--); font-size: 20px; line-height: 20px; text-align: start; unicode-bidi: plaintext; font-weight: bold; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-gray--) solid; } #ProfileView #ProfileHolder #ProfilePictureHolder{ position: relative; display: inline-block; margin-top: 10px; top: 0px; left: 0px; vertical-align: middle; text-align: center; width: 300px; height: 210px; } #ProfileView #ProfileHolder #ProfilePictureHolder #ProfilePictureTitle{ position: absolute; display: block; top: 0px; left: 5px; right: 5px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); } #ProfileView #ProfileHolder #ProfilePictureHolder #ProfilePictureText{ position: relative; display: block; margin-top: 40px; left: 5px; right: 5px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); } #ProfileView #ProfileHolder #ProfilePicture{ position: relative; display: inline-block; top: 40px; width: 120px; height: 120px; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: contain; background-color: aliceblue; border-radius: 100px; } #ProfileView #ProfileHolder #ProfileButtonsHolder{ position: relative; display: inline-block; margin-top: 60px; padding-left: 20px; padding-right: 20px; width: 140px; height: auto; vertical-align: middle; } #ProfileView #ProfileHolder #UploadButton{ position: relative; display: block; width: 140px; height: 36px; font-family: var(--primary-font--); font-size: 14px; line-height: 36px; text-align: center; background-color: var(--color-button-blue--); color: var(--color-white--); cursor: pointer; } #ProfileView #ProfileHolder #UploadButton:active{ background-color: var(--color-button-dark-blue--); } #ProfileView #ProfileHolder #DeleteButton{ position: relative; display: block; margin-top: 10px; width: 138px; height: 34px; font-family: var(--primary-font--); font-size: 14px; line-height: 36px; text-align: center; border: 1px var(--color-dark-gray--) solid; color: var(--primary-text-color-dark-gray--); cursor: pointer; } #ProfileView #ProfileHolder #DeleteButton #DeleteButtonIcon{ position: absolute; display: block; top: 8px; left: 10px; width: 20px; height: 20px; background-image: url('/assets/images/icons/delete_red.svg'); background-size: 20px 20px; background-repeat: no-repeat; } #ProfileView #ProfileHolder #DeleteButton:active{ color: var(--color-white--); background-color: var(--color-red--); } #ProfileView #ProfileHolder #DeleteButton:active > #DeleteButtonIcon{ background-image: url('/assets/images/icons/delete_white.svg'); } #ProfileView #ProfileHolder #UploadFile{ position: absolute; display: block; top: 10px; left: 10px; width: 100%; width: 100%; opacity: 0; cursor: pointer; } #ProfileView #ProfileHolder #ProfilePictureContainer .ProfilePictureSpacer{ position: relative; display: inline-block; width: calc(100% - 600px); height: 180px; vertical-align: middle; } #ProfileView #ProfileHolder #ProfilePictureInfoHolder{ position: relative; display: inline-block; top: 0px; right: 0px; width: 300px; height: 180px; overflow: hidden; vertical-align: middle; } #ProfileView #ProfileHolder #ProfilePictureInfoImage{ position: absolute; display: block; top: 8px; left: 10px; width: 300px; height: 160px; background-image: url(/assets/images/views/profileview/selfie.jpg); background-size: 240px 160px; background-position-x: 100px; background-repeat: no-repeat; } #ProfileView #ProfileHolder #ProfilePictureInfoText{ position: absolute; display: block; padding: 10px; bottom: 20px; left: 0px; width: 160px; height: auto; font-family: var(--primary-font--); font-size: 14px; line-height: 18px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); border-radius: 10px; } #ProfileView #ProfileHolder #ProfileViewForm{ position: relative; display: block; top: 0; left: 0; margin: 0 auto; padding-top: 10px; padding-bottom: 40px; width: 432px; min-height: 400px; height: auto; text-align: left; overflow: hidden; } #ProfileView #ProfileHolder .ProfileViewForm_rtl{ text-align: right !important; } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormFirstNameTitle{ position: relative; display: block; padding: 10px; top: 0px; left: 0px; width: 140px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormFirstNameText{ position: relative; display: inline-block; padding: 10px; top: 0px; left: 0px; width: 220px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: left; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); vertical-align: middle; border-radius: 10px; } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormLastNameTitle{ position: relative; display: block; padding: 10px; top: 0px; left: 0px; width: 160px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormLastNameText{ position: relative; display: inline-block; padding: 10px; top: 0px; left: 0px; width: 220px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: left; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-lighter-gray--); border-radius: 10px; } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormPhoneNumberTitle{ position: relative; display: block; padding: 10px; top: 0px; left: 0px; width: 160px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormPhoneNumberText{ position: relative; display: inline-block; padding: 10px; top: 0px; left: 0px; width: 220px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: left; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-lighter-gray--); border-radius: 10px; } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormEmailTitle{ position: relative; display: block; padding: 10px; top: 0px; left: 0px; width: 160px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormEmailText{ position: relative; display: inline-block; padding: 10px; top: 0px; left: 0px; width: 220px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: left; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-lighter-gray--); border-radius: 10px; } #ProfileView #ProfileHolder #ProfileViewForm .ProfileViewFormButton{ position: relative; display: inline-block; padding: 10px; margin-left: 20px; margin-right: 20px; top: 0px; left: 0px; width: 70px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-lighter-gray--); border-radius: 10px; cursor: pointer; } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormHolder input[type=text]{ position: relative; display: inline-block; padding: 10px; top: 0px; left: 0px; width: 300px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; box-sizing: border-box; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; vertical-align: middle; border-bottom: 1px solid #e0e0e0; border-radius: 10px; transition: 0.2s; } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormHolder input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } @media only screen and (max-width: 700px) { #ProfileView .Titlebar .Title{ width: calc(100% - 90px); } #ProfileView #ProfileInnerHolder{ padding: 0px; padding-bottom: 40px; width: 100%; } } @container ProfileView (width < 735px){ #ProfilePictureContainer{ width: 330px; } #ProfileView #ProfileHolder #ProfileViewForm{ width: 330px; padding-bottom: 0px; } #ProfileView #ProfileHolder #ProfileViewForm #ProfileViewFormHolder input[type=text]{ width: 200px; } #ProfileView #ProfileHolder #ProfileInnerHolder #ProfilePictureHolder{ position: relative; display: block; margin: 0 auto; } #ProfileView #ProfileHolder #ProfilePictureContainer .ProfilePictureSpacer{ display: none; } #ProfileView #ProfileHolder #ProfileInnerHolder #ProfilePictureInfoHolder{ position: relative; display: inline-block; position: relative; display: block; margin: 0 auto; top: -20px; width: 300px; height: 180px; overflow: hidden; } } /* filename: ../app/css/views/settings/SecurityView.css */ #SecurityView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: SecurityView; container-type: inline-size; } #SecurityView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #SecurityView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #SecurityView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #SecurityView .SecurityHolder{ position: relative; display: block; margin:0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; overflow-y: auto; } #SecurityView .InnerHolder { position: relative; display: block; margin: 0 auto; padding: 0px 20px 20px 20px; width: calc(100% - 40px); max-width: 800px; min-height: calc(100% - 20px); height: auto; background-color: var(--color-scheme-white--); text-align: center; overflow-x: hidden; overflow-y: auto; } #SecurityView .InnerHolder .SettingsTitleText{ position: relative; display: block; margin-top: 20px; margin-bottom: 20px; width: calc(100% - 20px); height: 40px; top: 0px; left: 10px; right: 10px; font-family: var(--primary-font--); font-size: 20px; line-height: 20px; text-align: start; unicode-bidi: plaintext; font-weight: bold; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-gray--) solid; } #SecurityView .InnerHolder .SecuritySettingsHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 20px; top: 0px; left: 0px; width: calc(100% - 40px); height: auto; min-height: 40px; text-align: start; } #SecurityView .InnerHolder .PasscodeSettingsHolder{ position: relative; display: block; margin: 0 auto; padding: 20px; top: 0px; left: 0px; width: calc(100% - 40px); height: auto; min-height: 40px; text-align: start; } #SecurityView .InnerHolder .TitleHolder{ position: relative; display: block; margin-bottom: 15px; width: 100%; height: 30px; background-color: var(--primary-brand-color-blue--); overflow: hidden; } #SecurityView .InnerHolder .TitleHolder .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px 10px 0px 10px; width: calc(100% - 70px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); vertical-align: top; } #SecurityView .InnerHolder .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px 10px 0px 10px; width: 30px; height: 30px; background-position: 10px 1px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } #SecurityView .InnerHolder .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } #SecurityView .InnerHolder .SecuritySettingsHolder .Text{ position: relative; display: none; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 20px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 26px; text-align: start; unicode-bidi: plaintext; font-weight: normal; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm{ position: relative; display: none; margin: 0 auto; padding: 10px; width: calc(100% - 20px); height: auto; background-color: var(--color-superlight-gray--); } #SecurityView .InnerHolder .PasscodeSettingsHolder .PasscodeForm{ position: relative; display: none; margin: 0 auto; padding: 10px; width: calc(100% - 20px); height: auto; min-height: 100px; background-color: var(--color-superlight-gray--); } #SecurityView .InnerHolder .PasscodeSettingsHolder .PasscodeForm .PasscodeInputHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 300px; height: 75px; overflow: hidden; } #SecurityView .InnerHolder .PasscodeSettingsHolder .PasscodeForm .PasscodeInputHolder input[type=text]{ position: relative; display: inline-block; margin: 5px; padding: 0px; width: 60px; height: 60px; text-align: center; font-size: 26px; color: var(--primary-text-color-dark-gray--); border-radius: 10px; border: 2px var(--color-scheme-gray-l4--) solid; background-color: var(--color-scheme-white--); outline: none; -webkit-appearance: none; appearance: none; caret-color: transparent; /* hides blinking cursor */ } #SecurityView .InnerHolder .PasscodeSettingsHolder .PasscodeForm .PasscodeInputHolder input[type=text]:focus{ border-color: var(--primary-brand-color-blue--); box-shadow: 0 2px 2px rgba(124, 58, 237, 0.16), inset 0 0 0 2px rgba(124, 58, 237, 0.06); } #SecurityView .InnerHolder .PasscodeSettingsHolder .PasscodeForm .PasscodeInputHolder .PasscodeInputItem::placeholder { color: rgba(255, 255, 255, 0.14); } #SecurityView .InnerHolder .ErrorMessageHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 20px); max-width: 400px; min-height: 30px; height: auto; font-size: 16px; line-height: 28px; font-weight: bold; color: var(--primary-text-color-dark-gray--); } #SecurityView .InnerHolder .InputTitle{ position: relative; display: block; margin: 0 auto; padding: 10px; top: 0px; left: 0px; width: 100%; max-width: 400px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; font-weight: normal; color: var(--primary-text-color-dark-gray--); } #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm .PasswordInput{ position: relative; display: block; margin: 0 auto; padding: 10px !important; top: 0px; left: 0px; width: 100%; max-width: 400px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; box-sizing: border-box; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; transition: 0.2s; } #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm .PasswordInput:focus{ background-color: var(--color-light-gray--); border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } #SecurityView .InnerHolder .SubmitButton{ position: relative; display: block; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; padding: 0px; width: 180px; height: 46px; font-family: var(--primary-font--); font-size: 18px; line-height: 46px; text-align: center; color: #ffffff; text-overflow: ellipsis; background-color: var(--primary-brand-color-blue--); border-radius: 26px; cursor: pointer; } /* The message box is shown when the user clicks on the password field */ #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm .MessageHolder { position: relative; display: none; margin: 0px; margin-top: 20px; padding: 0px; top: 0px; left: 0px; width: 100%; font-family: var(--primary-font--); font-size: 40px; line-height: 40px; text-align: left; color: var(--primary-brand-color-blue--); } #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm .MessageHolder .MessageHolderTitle{ position: relative; display: block; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 30px; font-size: 16px; line-height: 30px; text-align: center; color: var(--primary-text-color-dark-gray--); } #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm .MessageHolder p { position: relative; display: block; top: 0px; left: calc(50% - 100px); margin: 0px; padding: 0px; width: 200px; height: 30px; font-size: 16px; line-height: 30px; text-align: left; } #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm .rtl p{ right: calc(50% - 100px) !important; text-align: right !important; } /* Add a green text color and a checkmark when the requirements are right */ #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm .valid { color: rgb(21, 106, 21); } /* Add a red text color and an "x" icon when the requirements are wrong */ #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm .invalid { color: #b61a1a; } #SecurityView .InnerHolder .SecuritySettingsHolder .PasswordForm .PasswordMissmatchMessageHolder{ position: relative; display: none; margin: 0px; margin-top: 20px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 30px; font-size: 16px; line-height: 30px; text-align: center; color: #b61a1a; } @media only screen and (max-width: 700px) { #SecurityView .Titlebar .Title{ width: calc(100% - 90px); } } @media only screen and (max-width: 780px) { #SecurityView .SecurityHolder{ } #SecurityView .InnerHolder{ min-height: 100%; } #SecurityView .InnerHolder .SecuritySettingsHolder { margin-top: 10px; padding: 10px; width: calc(100% - 20px); } #SecurityView .InnerHolder .PasscodeSettingsHolder { margin-top: 10px; padding: 10px; width: calc(100% - 20px); } } @media only screen and (max-width: 700px) { #SecurityView .Titlebar .Title{ width: calc(100% - 90px); } #SecurityView .InnerHolder{ padding: 0px; width: 100%; } } /* filename: ../app/css/views/settings/GroupeditorView.css */ #GroupeditorView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; background-color: var(--color-lighter-gray--); overflow-x: hidden; overflow-y: hidden; container-name: GroupeditorView; container-type: inline-size; } #GroupeditorView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #GroupeditorView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #GroupeditorView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #GroupeditorView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #GroupeditorView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #GroupeditorView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #GroupeditorView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #GroupeditorView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #GroupeditorView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #GroupeditorView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-superlight-gray--); overflow-x: hidden; overflow-y: auto; } #GroupeditorView .InnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; padding-top: 10px; padding-left: 200px; padding-right: 200px; padding-bottom: 20px; top: 0px; left: 0px; width: 400px; height: auto; min-height: calc(100% - 30px); text-align: left; background-color: var(--color-white--); } #GroupeditorView .InnerHolder .FormHolder .TopOfPageIcon{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; width: 50px; height: 50px; background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; } #GroupeditorView .InnerHolder .FormHolder .GroupeditorViewGroupIDTitle{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #GroupeditorView .InnerHolder .FormHolder .InputTitle{ position: relative; display: block; margin: 0px; margin-top: 10px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #GroupeditorView .InnerHolder .FormHolder input[type=text]{ position: relative; display: block; padding: 10px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; box-sizing: border-box; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; transition: 0.2s; } #GroupeditorView .InnerHolder .FormHolder input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #GroupeditorView .InnerHolder .FormHolder #GroupeditorViewGroupDescription{ margin-bottom: 20px; } #GroupeditorView .InnerHolder .UserListTable{ position: relative; display: block; margin: 0 auto; margin-bottom: 20px; top: 0px; left: 0px; width: 400px; height: 356px; border: 1px var(--primary-brand-color-blue--) solid; border-radius: 10px; overflow: hidden; } #GroupeditorView .InnerHolder .UserListTable .SearchBar{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; text-align: center; overflow: hidden; background-color: var(--primary-brand-color-blue--); border-top-left-radius: 8px; border-top-right-radius: 8px; } #GroupeditorView .InnerHolder .UserListTable .SearchBar .UserListIcon{ position: relative; display: inline-block; margin: 5px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-image: url('/assets/images/icons/user_white.svg'); background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #GroupeditorView .InnerHolder .UserListTable .SearchBar .UserListTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 225px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; vertical-align: middle; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); text-overflow: ellipsis; } #GroupeditorView .InnerHolder .UserListTable .SearchBar .SearchField{ position: relative; display: inline-block; margin: 0px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; left: 0px; width: 165px; height: 46px; vertical-align: middle; overflow: hidden; } #GroupeditorView .InnerHolder .UserListTable .SearchBar .SearchField .SearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 8px; left: 15px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #GroupeditorView .InnerHolder .UserListTable .SearchBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 10px; right: 4px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--primary-brand-color-light-blue--); cursor: pointer; } #GroupeditorView .InnerHolder .UserListTable .SearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--primary-brand-color-blue--); } #GroupeditorView .InnerHolder .UserListTable .SearchBar .SearchField input[type=text]{ position: absolute; display: block; margin-left: 10px; margin-right: 10px; padding-left: 35px; padding-right: 38px; top: 5px; left: 0px; width: calc(100% - 10px); height: 36px; box-sizing: border-box; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; border: none; background-color: var(--color-white--); color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 18px; } #GroupeditorView .InnerHolder .UserListTable .SearchBar .SearchField input[type=text]:focus{ outline: none; } #GroupeditorView .InnerHolder .UserListTable .UserListTableUsersHolder{ position: relative; display: block; width: 100%; height: calc(100% - 50px); overflow-x: hidden; overflow-y: auto; } #GroupeditorView .InnerHolder .UserListTable .UserListTableUsersHolder .TableItem{ position: relative; display: block; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #GroupeditorView .InnerHolder .UserListTable .UserListTableUsersHolder .TableItem:hover{ background-color: var(--color-lighter-gray--); } #GroupeditorView .InnerHolder .UserListTable .UserListTableUsersHolder .TableItem .CheckboxHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 50px; height: 50px; vertical-align: middle; pointer-events: none; } #GroupeditorView .InnerHolder .UserListTable .UserListTableUsersHolder .TableItem .CheckboxHolder .Checkbox{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 19px; left: 0px; cursor: pointer; } #GroupeditorView .InnerHolder .UserListTable .UserListTableUsersHolder .TableItem .ProfilePicture{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: 0px 0px; background-size: 40px 40px; vertical-align: middle; border-radius: 25px; border: 2px var(--color-white--) solid; overflow: hidden; } #GroupeditorView .InnerHolder .UserListTable .UserListTableUsersHolder .TableItem .ItemName{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: calc(100% - 124px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @container GroupeditorView (width < 800px) { #GroupeditorView .InnerHolder { background-color: var(--color-white--); } #GroupeditorView .InnerHolder .FormHolder { padding: 0px; padding-top: 10px; width: 400px; } } @media only screen and (max-width: 700px) { #GroupeditorView .Titlebar .Title{ width: calc(100% - 86px) !important; } #GroupeditorView .InnerHolder .FormHolder{ width: calc(100% - 20px); } #GroupeditorView .InnerHolder .FormHolder .InputTitle{ margin-top: 10px; } #GroupeditorView .InnerHolder .UserListTable{ width: calc(100% - 10px); } } /* filename: ../app/css/views/settings/TaskeditorView.css */ #TaskeditorView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); } #TaskeditorView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #TaskeditorView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #TaskeditorView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #TaskeditorView .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #TaskeditorView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #TaskeditorView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #TaskeditorView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #TaskeditorView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #TaskeditorView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #TaskeditorView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } @media only screen and (max-width: 700px) { #TaskeditorView .Titlebar .Title{ width: calc(100% - 86px) !important; } } /* filename: ../app/css/views/settings/FormeditorView.css */ #FormeditorView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); container-name: FormeditorView; container-type: inline-size; } #FormeditorView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #FormeditorView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #FormeditorView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #FormeditorView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; opacity: 1.0; } #FormeditorView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #FormeditorView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #FormeditorView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #FormeditorView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #FormeditorView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #FormeditorView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); } #FormeditorView .InnerHolder .MenuBarHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100px; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; max-width: 720px; height: 100%; } #FormeditorView .InnerHolder .FormNameHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; margin-left: 6px; margin-right: 6px; padding: 0px; top: 0px; left: 0px; text-align: start; width: calc(100% - 170px); height: 40px; } #FormeditorView .InnerHolder .FormNameHolder .FormNameIcon{ position: relative; display: inline-block; top: 0px; width: 36px; height: 40px; background-image: url(/assets/images/icons/form_file_black.svg); background-position: 0px 3px; background-size: 34px 34px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormeditorView .InnerHolder .FormNameHolder .FormName{ position: relative; display: inline-block; width: calc(100% - 50px); height: 32px; padding: 6px 10px; margin: 0 auto; margin-left: 5px; margin-right: 5px; box-sizing: border-box; font-size: 18px; line-height: 24px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; border: none; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; vertical-align: middle; overflow: hidden; } #FormeditorView .InnerHolder .FormNameHolder [contenteditable="true"]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } #FormeditorView .InnerHolder .FormNameHolder [contenteditable="true"].FormName br { display:none; } #FormeditorView .InnerHolder .FormNameHolder [contenteditable="true"].FormName * { display:inline; white-space:nowrap; } #FormeditorView .InnerHolder .FormNameHolder .FormName:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .ShareButton{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; padding-left: 5px; padding-right: 5px; top: 0px; width: auto; max-width: 140px; height: 32px; border-radius: 16px; background-color: var(--color-heavy-gray--); vertical-align: middle; text-align: center; overflow: hidden; cursor: pointer; pointer-events: none; transition: 0.2s; } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .ShareButton .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; max-width: 90px; height: 32px; font-size: 16px; line-height: 32px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; color: var(--color-white--); vertical-align: top; overflow: hidden; } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .ShareButton .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 32px; width: 32px; background-image: url(/assets/images/icons/share_white.svg); background-position: 5px 6px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: pointer; } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .ShareButton .Icon_rtl{ transform: rotate(180deg); } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .Active{ background-color: var(--primary-brand-color-dark-blue--) !important; } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .Active:hover{ background-color: var(--primary-brand-color-dark-blue--) !important; } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .Unlocked{ pointer-events: unset; background-color: var(--primary-brand-color-blue--); } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder{ position: relative; display: block; margin: 0 auto; margin-top: 4px; padding: 0px; width: calc(100% - 80px); height: 30px; text-align: start; } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder .TitleHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; max-width: 140px; height: 30px; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; border: none; color: var(--primary-text-color-dark-gray--); vertical-align: middle; overflow: hidden; } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder .MenuTitleHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 158px); height: 30px; text-align: start; vertical-align: middle; cursor: pointer; } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder .MenuTitleHolder .MenuTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; height: 30px; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; border: none; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-radius: 5px; cursor: pointer; } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder .MenuTitleHolder .Menu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 35px; width: auto; min-height: 60px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder .MenuTitleHolder .Menu .Item{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; height: 39px; font-size: 16px; line-height: 39px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; border: none; color: var(--color-dark-gray--); border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder .MenuTitleHolder .Menu .Item:last-child{ border-bottom: 0px; } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder .MenuTitleHolder .Menu .Item:hover{ background-color: var(--color-lighter-gray--); } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder .MenuTitleHolder .Menu .Item .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; height: 30px; font-size: 16px; line-height: 39px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; border: none; color: var(--color-dark-gray--); cursor: pointer; } #FormeditorView .InnerHolder .PageHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top:5px; top: 0px; left: 0px; width: 100%; height: calc(100% - 108px); overflow-x: hidden; overflow-y: auto !important; } #FormeditorView .InnerHolder .PageDialogHolder{ position: absolute; display: none; margin: 0 auto; padding: 0px; padding-top: 5px; top: 0px; left: 0px; width: 100%; height: calc(100% - 5px); background-color: rgba(0, 0, 0, 0.6); overflow-x: hidden; overflow-y: auto !important; } #FormeditorView .InnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; margin-bottom: 5px; padding: 0px; padding-top: 20px; padding-bottom: 25px; padding-left: 30px; padding-right: 30px; top: 0px; left: 0px; width: 100%; max-width: 660px; height: auto; min-height: calc(100% - 50px); background-color: var(--color-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); } #FormeditorView .InnerHolder .ShareDialog{ position: relative; display: block; margin: 0 auto; margin-bottom: 5px; padding: 0px; padding-top: 20px; padding-bottom: 25px; padding-left: 30px; padding-right: 30px; top: 0px; left: 0px; width: 100%; max-width: 660px; height: auto; min-height: calc(100% - 50px); background-color: var(--color-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); } #FormeditorView .InnerHolder .ShareDialog .Title{ position: relative; display: inline-block; width: calc(100% - 112px); height: 40px; margin: 0 auto; padding: 0px; font-size: 18px; line-height: 24px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; font-weight: 600; white-space: nowrap; color: var(--primary-text-color-dark-gray--); vertical-align: top; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .CloseButton{ position: relative; display: inline-block; width: 100px; height: 32px; margin: 0 auto; margin-top: -5px; padding: 0px; vertical-align: top; text-align: center; background-color: var(--color-lighter-gray--); border-radius: 15px; overflow: hidden; cursor: pointer; transition: 0.2s; } #FormeditorView .InnerHolder .ShareDialog .CloseButton .Icon{ position: relative; display: inline-block; width: 26px; height: 32px; margin: 0 auto; padding: 0px; background-position: 5px 6px; background-repeat: no-repeat; background-image: url(/assets/images/icons/close_black.svg); background-size: 20px 20px; vertical-align: top; } #FormeditorView .InnerHolder .ShareDialog .CloseButton .Title{ position: relative; display: inline-block; width: auto; height: 32px; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; font-size: 16px; line-height: 32px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; vertical-align: top; overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .CloseButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #FormeditorView .InnerHolder .ShareDialog .CloseButton:active .Title{ color: var(--color-white--); } #FormeditorView .InnerHolder .ShareDialog .CloseButton:active .Icon{ background-image: url(/assets/images/icons/close_white.svg); } #FormeditorView .InnerHolder .ShareDialog .TabBar{ position: relative; display: block; margin: 0 auto; margin-top: 10px; top: 0px; width: calc(100% - 14px); height: 50px; text-align: left; } #FormeditorView .InnerHolder .ShareDialog .TabBar .TabBarMenuItem{ position: relative; display: inline-block; margin: 0px; margin-left: 2px; margin-right: 2px; padding: 0px; top: 0px; left: 0px; text-align: center; height: 48px; width: auto; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-top: 1px var(--color-light-gray--) solid; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #ffffff; cursor: pointer; } #FormeditorView .InnerHolder .ShareDialog .TabBar .TabBarMenuItem.selected{ background-color: var(--primary-brand-color-blue--); } #FormeditorView .InnerHolder .ShareDialog .TabBar .TabBarMenuItem.selected:hover{ background-color: var(--primary-brand-color-blue--); } #FormeditorView .InnerHolder .ShareDialog .TabBar .TabBarMenuItem:hover{ background-color: var(--color-light-gray--); } #FormeditorView .InnerHolder .ShareDialog .TabBar .TabBarMenuItemIcon{ position: relative; display: inline-block; margin-right: 10px; margin-left: 10px; top: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #FormeditorView .InnerHolder .ShareDialog .TabBar .TabBarMenuItemTitle{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: auto; height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: left; vertical-align: middle; color: var(--primary-text-color-gray-); text-overflow: ellipsis; } #FormeditorView .InnerHolder .ShareDialog .TabBar .TabBarMenuItem.selected .TabBarMenuItemTitle{ color: #ffffff; } #FormeditorView .InnerHolder .ShareDialog .DialogInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; overflow: hidden; border: 1px var(--color-light-gray--) solid; } #FormeditorView .InnerHolder .ShareDialog .InfoTextHolder{ position: relative; display: block; margin: 0 auto; margin-top: 20px; padding: 10px; padding-bottom: 0px; width: calc(100% - 40px); height: auto; font-size: 18px; line-height: 26px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .WithBottomPadding{ padding-bottom: 30px; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder{ position: relative; display: block; margin: 0 auto; margin-top:20px; padding: 10px; width: calc(100% - 30px); height: auto; min-height: 100px; overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTableTitle{ position: relative; display: inline-block; width: calc(100% - 100px); height: 20px; margin: 0 auto; margin-bottom: 5px; padding: 10px; font-size: 18px; line-height: 20px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTableDescription{ position: relative; display: block; margin: 0 auto; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; width: calc(100% - 20px); height: auto; font-size: 16px; line-height: 26px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .NoAddButton{ width: calc(100% - 20px) !important; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .AddButton{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; padding-right: 5px; padding-left: 5px; width: 60px; height: 22px; font-family: var(--primary-font--); font-size: 14px; line-height: 22px; text-align: center; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-radius: 15px; overflow: hidden; cursor: pointer; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .AddButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 30px; height: auto; border: 1px var(--color-light-gray--) solid; background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; /*border-radius: 20px;*/ direction: ltr; text-align: left; overflow-x: hidden; overflow-y: auto; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item{ position: relative; display: block; top: 0px; left: 0px; margin:0 auto; padding: 0px; width: 100%; height: 40px; overflow:hidden; border-bottom: 1px var(--color-light-gray--) solid; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item:last-child{ border-bottom: none; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .StarButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 3px 3px; background-repeat: no-repeat; background-image: url(/assets/images/icons/star_full_gray.svg); background-size: 24px 24px; cursor: pointer; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .StarButtonSelected{ background-image: url('/assets/images/icons/star_full_black.svg') !important; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .BookmarkButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 2px 2px; background-repeat: no-repeat; background-image: url(/assets/images/icons/bookmark_gray.svg); background-size: 26px 26px; cursor: pointer; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .BookmarkButtonSelected{ background-image: url('/assets/images/icons/bookmark_checked_black.svg') !important; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 100px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; text-align: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .NameWithButton{ width: calc(100% - 124px); } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .TitleWithButton{ margin-right: 5px !important; margin-left: 5px !important; width: calc(100% - 80px) !important; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .CreatorBadge{ position: relative; display: inline-block; margin-top: 9px; margin-right: 20px; margin-left: 20px; padding-right: 10px; padding-left: 10px; width: auto; height: 22px; font-family: var(--primary-font--); font-size: 14px; line-height: 22px; text-align: start; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; color: var(--color-white--); background-color: var(--color-gray--); border-radius: 15px; overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .Title{ position: relative; display: inline-block; margin: 0 auto; margin-right: 15px; margin-left: 15px; padding: 0px; width: calc(100% - 72px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; font-weight: normal; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .DeleteButton{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 5px 5px; background-repeat: no-repeat; background-image: url('/assets/images/icons/delete_black.svg'); background-size: 20px 20px; border-radius: 15px; cursor: pointer; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .NoDeleteButton{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .DeleteButton:active{ background-color: var(--color-heavy-gray--); } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .SingleResponderCheckboxHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-bottom: 8px; height: 30px; width: 100%; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; cursor: pointer; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .SingleResponderCheckbox{ position: relative; display: inline-block; margin: 0 auto; margin-left:5px; margin-right:5px; padding: 0px; width: 30px; height: 30px; background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: inherit; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .Unchecked{ background-image: url(/assets/images/icons/checkbox_black.svg); } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .Checked{ background-image: url(/assets/images/icons/checkbox_checked_black.svg); } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .SingleResponderCheckboxTitle{ position: relative; display: inline-block; width: calc(100% - 40px); height: 30px; margin: 0 auto; padding: 0px; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; color: var(--primary-text-color-dark-gray--); overflow: hidden; cursor: inherit; } /**/ #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-bottom: 8px; height: 30px; width: 100%; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder .AnonymousResponsesCheckbox{ position: relative; display: inline-block; margin: 0 auto; margin-left:5px; margin-right:5px; padding: 0px; width: 30px; height: 30px; background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: pointer; } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder .Unchecked{ background-image: url(/assets/images/icons/checkbox_black.svg); } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder .Checked{ background-image: url(/assets/images/icons/checkbox_checked_black.svg); } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder .AnonymousResponsesCheckboxTitle{ position: relative; display: inline-block; width: calc(100% - 40px); height: 30px; margin: 0 auto; padding: 0px; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; color: var(--primary-text-color-dark-gray--); overflow: hidden; cursor: pointer; } /**/ @container FormeditorView (max-width: 730px){ #FormeditorView .InnerHolder .FormHolder{ padding-left: 5px; padding-right: 5px; max-width: unset; width: calc(100% - 10px); } #FormeditorView .InnerHolder .ShareDialog{ padding-left: 5px; padding-right: 5px; max-width: unset; width: calc(100% - 20px); } #FormeditorView .InnerHolder .ShareDialog .TabBar .TabBarMenuItemTitle{ position: relative; display: none; } #FormeditorView .InnerHolder .ShareDialog .TabBar .TabBarMenuItemIcon{ margin-top: 8px; } } @media only screen and (max-width: 780px) { #FormeditorView .InnerHolder .FormHolder{ padding-left: 5px; padding-right: 5px; max-width: unset; width: calc(100% - 10px); } #FormeditorView .InnerHolder .MenuBarHolder .TemplateTypeMenuHolder{ width: 100% } #FormeditorView .InnerHolder .ShareDialog{ padding-left: 5px; padding-right: 5px; max-width: unset; } #FormeditorView .Titlebar .Title{ width: calc(100% - 86px) !important; } #FormeditorView .InnerHolder .FormNameHolder { width: calc(100% - 55px); } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .ShareButton{ width: auto; padding-left: 0px; padding-right: 0px; } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .ShareButton .Title{ display: none; } } @media only screen and (hover: hover) and (min-width: 781px){ #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .ShareButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .AddButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } #FormeditorView .InnerHolder .ShareDialog .ShareTableHolder .ShareTable .Item .DeleteButton:hover{ background-color: var(--color-light-gray--); } #FormeditorView .InnerHolder .ShareDialog .CloseButton:hover{ background-color: var(--primary-brand-color-blue--); } #FormeditorView .InnerHolder .ShareDialog .CloseButton:hover .Title{ color: var(--color-white--); } #FormeditorView .InnerHolder .ShareDialog .CloseButton:hover .Icon{ background-image: url(/assets/images/icons/close_white.svg); } } /* filename: ../app/css/views/settings/SchedulingmanagementView.css */ #SchedulingmanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: SchedulingmanagementView; container-type: inline-size; } #SchedulingmanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #SchedulingmanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #SchedulingmanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #SchedulingmanagementView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #SchedulingmanagementView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #SchedulingmanagementView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #SchedulingmanagementView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #SchedulingmanagementView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #SchedulingmanagementView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #SchedulingmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #SchedulingmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #SchedulingmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #SchedulingmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #SchedulingmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #SchedulingmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #SchedulingmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #SchedulingmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #SchedulingmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #SchedulingmanagementView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #SchedulingmanagementView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #SchedulingmanagementView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #SchedulingmanagementView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #SchedulingmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #SchedulingmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @media only screen and (max-width: 700px) { #SchedulingmanagementView .Titlebar .Title{ width: calc(100% - 126px); } } @media only screen and (max-width: 780px) { #SchedulingmanagementView .InnerHolder{ height: calc(100% - 40px); } #SchedulingmanagementView .Searchbar{ height: 50px; } #SchedulingmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #SchedulingmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #SchedulingmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #SchedulingmanagementView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #SchedulingmanagementView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #SchedulingmanagementView .Searchbar .SearchBarHolder .Space2{ width: 0px; } #SchedulingmanagementView .Table{ margin:0px; width: 100%; height: calc(100% - 50px); } } /* filename: ../app/css/views/settings/EdituserView.css */ #EdituserView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--color-lighter-gray--); container-name: EdituserView; container-type: inline-size; } #EdituserView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #EdituserView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 6px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #EdituserView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; } #EdituserView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #EdituserView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #EdituserView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #EdituserView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #EdituserView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #EdituserView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #EdituserView .EdituserViewInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-lighter-gray--); overflow-x: hidden; overflow-y: auto; } #EdituserView .EdituserViewInnerHolder #FormHolder{ position: relative; display: block; margin: 0 auto; padding: 10px; padding-left: 100px; padding-right: 100px; padding-bottom: 50px; top: 0px; left: 0px; width: 560px; height: auto; min-height: calc(100% - 60px); text-align: left; background-color: var(--color-white--); } #EdituserView .EdituserViewInnerHolder #FormHolder .Header{ margin: 3%; margin-bottom: 60px; > h2 { padding: 1rem; margin: 0 0 0.5rem 0; } > p { padding: 0 1rem; } } #EdituserView .EdituserViewInnerHolder #FormHolder .Stripes{ height: 70px; color: white; background: repeating-linear-gradient( 30deg, var(--color-light-gray--), var(--color-light-gray--) 10px, var(--color-lighter-gray--) 10px, var(--color-lighter-gray--) 20px ); border-bottom: 5px var(--primary-brand-color-blue--) solid; } #EdituserView .EdituserViewInnerHolder #FormHolder .ProfilePicture{ position: absolute; display: block; margin: 0px; padding: 0px; top: 20px; left: calc(50% - 60px); height: 120px; width: 120px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 60px; border: 2px #ffffff solid; } #EdituserView .EdituserViewInnerHolder #FormHolder .InputTitle{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #EdituserView #FormHolder input[type=text]{ position: relative; display: block; padding: 10px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; unicode-bidi: plaintext; box-sizing: border-box; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; transition: 0.2s; } #EdituserView #FormHolder input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #EdituserView #FormHolder .InmailHolder{ position: relative; display: block; margin: 0 auto; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 20px); height: 50px; background-color: var(--color-scheme-gray-l1--); border-radius: 10px; overflow: hidden; } #EdituserView #FormHolder .InmailHolder.Enabled{ height: 100px; } #EdituserView #FormHolder .InmailHolder .CheckboxTitle{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 36px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: top; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #EdituserView #FormHolder .InmailHolder .Checkbox{ position: relative; display: inline-block; margin: 10px; padding: 0px; top: 8px; left: 0px; vertical-align: middle; cursor: pointer; } #EdituserView #FormHolder .InmailHolder .EmailHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top: 4px; width: 100%; height: 50px; text-align: left; direction: ltr; border-top: 1px solid var(--color-scheme-white--); overflow: hidden; } #EdituserView #FormHolder .InmailHolder .EmailHolder input[type=text]{ position: relative; display: inline-block; padding: 10px; top: 0px; left: 0px; width: 250px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; unicode-bidi: plaintext; box-sizing: border-box; background-color: var(--color-scheme-gray-l2--); color: var(--primary-text-color-dark-gray--); vertical-align: top; border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; } #EdituserView #FormHolder .InmailHolder .EmailHolder input[type=text]:focus{ background-color: var(--color-scheme-gray-l2--); border-bottom: 1px solid var(--color-scheme-gray-l3--); outline: none; } #EdituserView #FormHolder .InmailHolder .EmailHolder .InmailDomain{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(100% - 250px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); vertical-align: top; } #EdituserView #FormHolder .TimetrackingAccessList{ position: relative; display: none; margin: 0 auto; margin-top: 10px; top: 0px; left: calc(50% - 280px); width: 560px; height: auto; min-height: 100px; overflow: hidden; text-align: left; font-size: 0; } #EdituserView #FormHolder .TimetrackingListTitleBar{ position: relative; display: block; margin: 0px; margin-top: 30px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; cursor: pointer; } #EdituserView #FormHolder .TimetrackingListTitleBar .Title{ position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 20px; padding-right: 20px; top: 0px; left: 0px; width: calc(100% - 80px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; } #EdituserView #FormHolder .TimetrackingListTitleBar .Icon{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 4px -4px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 50px; transition: 0.2s; } #EdituserView #FormHolder .PositionsListTitleBar{ position: relative; display: block; margin: 0px; margin-top: 30px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; cursor: pointer; } #EdituserView #FormHolder .PositionsListTitleBar .Title{ position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 20px; padding-right: 20px; top: 0px; left: 0px; width: calc(100% - 80px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; } #EdituserView #FormHolder .PositionsListTitleBar .Icon{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 4px -4px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 50px; transition: 0.2s; } #EdituserView #FormHolder .LocationsListTitleBar{ position: relative; display: block; margin: 0px; margin-top: 30px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; cursor: pointer; } #EdituserView #FormHolder .LocationsListTitleBar .Title{ position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 20px; padding-right: 20px; top: 0px; left: 0px; width: calc(100% - 80px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; } #EdituserView #FormHolder .LocationsListTitleBar .Icon{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 4px -4px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 50px; transition: 0.2s; } #EdituserView #FormHolder .FeatureAccessListTitleBar{ position: relative; display: block; margin: 0px; margin-top: 30px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; cursor: pointer; } #EdituserView #FormHolder .FeatureAccessListTitleBar .Title{ position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 20px; padding-right: 20px; top: 0px; left: 0px; width: calc(100% - 80px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; } #EdituserView #FormHolder .FeatureAccessListTitleBar .Icon{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 4px -4px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 50px; transition: 0.2s; } #EdituserView #FormHolder .SettingsAccessListTitleBar{ position: relative; display: block; margin: 0px; margin-top: 30px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; cursor: pointer; } #EdituserView #FormHolder .SettingsAccessListTitleBar .Title{ position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 20px; padding-right: 20px; top: 0px; left: 0px; width: calc(100% - 80px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); text-overflow: ellipsis; } #EdituserView #FormHolder .SettingsAccessListTitleBar .Icon{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 4px -4px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 50px; transition: 0.2s; } #EdituserView #FormHolder .FeatureAccessList{ position: relative; display: none; margin: 0 auto; margin-top: 10px; top: 0px; left: calc(50% - 280px); width: 560px; height: auto; min-height: 60px; overflow: hidden; text-align: inherit; font-size: 0; } #EdituserView #FormHolder .FeatureAccessList .Item{ position: relative; display: inline-block; margin: 10px; padding: 0px; top: 0px; width: 260px; height: 40px; background-color: var(--color-lighter-gray--); border-radius: 10px; text-align: left; overflow: hidden; cursor: pointer; } #EdituserView #FormHolder .FeatureAccessList .Item .Icon{ position: relative; display: inline-block; margin: 0px; margin-left: 3px; margin-right: 3px; width: 40px; height: 40px; vertical-align: middle; background-size:30px 30px; background-repeat: no-repeat; background-position: 5px 5px; } #EdituserView #FormHolder .FeatureAccessList .Item .Title{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 176px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #EdituserView #FormHolder .FeatureAccessList .Item .TitleNoIcon{ position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 14px; padding-right: 14px; top: 0px; left: 0px; width: 194px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #EdituserView #FormHolder .FeatureAccessList .Item .Checkbox{ position: relative; display: inline-block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; left: 0px; vertical-align: middle; cursor: pointer; pointer-events: none; } @media only screen and (max-width: 700px) { #EdituserView .Titlebar .Title{ width: calc(100% - 86px) !important; } } @container EdituserView (width < 800px){ #EdituserView #FormHolder .InmailHolder .EmailHolder input[type=text]{ width: 150px; } #EdituserView #FormHolder .InmailHolder .EmailHolder .InmailDomain{ width: calc(100% - 150px); } #EdituserView .EdituserViewInnerHolder{ background-color: var(--color-white--); } #EdituserView .EdituserViewInnerHolder #FormHolder{ padding: 10px; width: calc(100% - 20px); max-width: 560px; } #EdituserView #FormHolder .FeatureAccessList{ left: unset; width: 300px; text-align: center; } } /* filename: ../app/css/views/settings/UseraccountsView.css */ #UseraccountsView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--color-white--); container-name: UseraccountsView; container-type: inline-size; } #UseraccountsView > .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #UseraccountsView > .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #UseraccountsView > .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #UseraccountsView > .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; background-position: 6px 0px; cursor: pointer; } #UseraccountsView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #UseraccountsView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #UseraccountsView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #UseraccountsView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #UseraccountsView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #UseraccountsView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #UseraccountsView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #UseraccountsView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #UseraccountsView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #UseraccountsView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #UseraccountsView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #UseraccountsView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #UseraccountsView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #UseraccountsView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #UseraccountsView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #UseraccountsView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #UseraccountsView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #UseraccountsView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #UseraccountsView .Table{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 50px); text-align: left; overflow: hidden; } #UseraccountsView .Table_rtl{ text-align: right !important; } #UseraccountsView .TableTitle{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: calc(100% - 10px); height: 50px; border-bottom: 1px var(--primary-brand-color-blue--) solid; overflow: hidden; } #UseraccountsView .TableTitle .Clickable{ cursor: pointer; } #UseraccountsView .Table .TableItemsHolder{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: calc(100% - 52px); background-color: var(--color-superlight-gray--); overflow-x: hidden; overflow-y: auto; } #UseraccountsView .Table .TableItem{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; text-align: inherit; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; } #UseraccountsView .Table .TableItemsHolder .TableItem:hover{ background-color: var(--color-lighter-gray--); } #UseraccountsView .Table .ProfileSpace{ position: relative; display: inline-block; margin: 0px; margin-left: 15px; margin-right: 15px; padding: 0px; top: 0px; left: 0px; height: 40px; width: 40px; vertical-align: middle; } /* #UseraccountsView .Table .Checkbox{ position: absolute; display: block; margin: 0px; padding: 0px; top: 18px; left: 20px; } */ #UseraccountsView .Table .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-left: 15px; margin-right: 15px; padding: 0px; top: 0px; left: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #UseraccountsView .Table .FirstName{ position: relative; display: inline-block; width: 160px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #UseraccountsView .Table .LastName{ position: relative; display: inline-block; width: 160px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #UseraccountsView .Table .Title{ position: relative; display: inline-block; width: 240px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #UseraccountsView .Table .ShortTitle{ position: relative; display: inline-block; width: 100px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; overflow: hidden; } #UseraccountsView .Table .Active{ position: relative; display: inline-block; width: 80px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #UseraccountsView .Table .Blocked{ position: relative; display: inline-block; width: 80px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #UseraccountsView .Table .CheckBox{ position: relative; display: inline-block; margin-top: 13px; width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; overflow: hidden; } #UseraccountsView .Table .TitleSpace{ position: relative; display: inline-block; margin: 0px; top: 0px; left: 0px; height: 50px; width: calc(100% - 834px); vertical-align: middle; } #UseraccountsView .Table .Space{ position: relative; display: inline-block; margin: 0px; top: 0px; left: 0px; height: 50px; width: calc(100% - 856px); vertical-align: middle; } #UseraccountsView .Table .MenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 50px; width: 20px; vertical-align: middle; background-position: 0px 5px; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } #UseraccountsView .Table .MenuButton .TableItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 48px; left: -162px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #UseraccountsView .Table .MenuButton .TableItemMenu_rtl { left: 0px; } #UseraccountsView .Table .MenuButton .TableItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #UseraccountsView .Table .MenuButton .TableItemMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #UseraccountsView .Table .MenuButton .TableItemMenu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #UseraccountsView .Table .MenuButton .TableItemMenu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #UseraccountsViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #UseraccountsViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @container UseraccountsView (width < 910px) { #UseraccountsView .Table .TableItem .Title{ display: none; } #UseraccountsView .Table .Space{ width: calc(100% - 616px); } } @container UseraccountsView (width < 668px) { #UseraccountsView .Table .TableItem .FirstName { width: 78px; font-size: 14px; } #UseraccountsView .Table .TableItem .LastName { width: 78px; font-size: 14px; } #UseraccountsView .Table .TableItem .ShortTitle{ font-size: 14px; width: 60px; } #UseraccountsView .Table .Space{ width: calc(100% - 372px); } } @container UseraccountsView (max-width: 780px){ #UseraccountsView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #UseraccountsView .Searchbar .SearchField input[type=text]{ width: 100%; } #UseraccountsView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #UseraccountsView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #UseraccountsView .Searchbar .SearchBarHolder .Space2{ width: 0px; } } @media only screen and (max-width: 700px) { #UseraccountsView > .Titlebar .Title{ width: calc(100% - 126px); } } @media only screen and (max-width: 780px) { #UseraccountsView .Searchbar{ height: 50px; } #UseraccountsView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #UseraccountsView .Table{ margin:0px; width: 100%; height: calc(100% - 50px); } #UseraccountsView .Table .TableTitle{ width: 100%; height: 48px; border-radius: 0px; } #UseraccountsView .Table .ProfileSpace { margin-left: 10px; margin-right: 10px; } #UseraccountsView .Table .TableItemsHolder{ min-width: 360px; } #UseraccountsView .Table .TableItem{ min-width: 100%; } #UseraccountsView .Table .TableItemsHolder .TableItem:hover{ background-color: var(--color-white--); } #UseraccountsView .Table .TableItemsHolder .TableItem:active{ background-color: var(--color-lighter-gray--); } #UseraccountsView .Table .Checkbox{ display: none; } #UseraccountsView .Table .TableItem .ProfilePicture{ margin-left:10px; margin-right: 10px; } #UseraccountsView .Table .TableItem .FirstName { width: 76px; font-size: 14px; } #UseraccountsView .Table .TableItem .LastName { width: 76px; font-size: 14px; } #UseraccountsView .Table .TableItem .Title{ display: none; } #UseraccountsView .Table .TableItem .Email{ display: none; } #UseraccountsView .Table .TableItem .ShortTitle { width: 60px; font-size: 14px; } #UseraccountsView .Table .TableItem .PhoneNumber{ display: none; } } /* filename: ../app/css/views/settings/TimetrackingmanagementView.css */ #TimetrackingmanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: TimetrackingmanagementView; container-type: inline-size; } #TimetrackingmanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #TimetrackingmanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #TimetrackingmanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #TimetrackingmanagementView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #TimetrackingmanagementView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #TimetrackingmanagementView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #TimetrackingmanagementView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #TimetrackingmanagementView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #TimetrackingmanagementView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #TimetrackingmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #TimetrackingmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #TimetrackingmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #TimetrackingmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #TimetrackingmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #TimetrackingmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #TimetrackingmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #TimetrackingmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #TimetrackingmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #TimetrackingmanagementView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #TimetrackingmanagementView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #TimetrackingmanagementView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #TimetrackingmanagementView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #TimetrackingmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #TimetrackingmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @media only screen and (max-width: 700px) { #TimetrackingmanagementView .Titlebar .Title{ width: calc(100% - 126px); } } @media only screen and (max-width: 780px) { #TimetrackingmanagementView .InnerHolder{ height: calc(100% - 40px); } #TimetrackingmanagementView .Searchbar{ height: 50px; } #TimetrackingmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #TimetrackingmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #TimetrackingmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #TimetrackingmanagementView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #TimetrackingmanagementView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #TimetrackingmanagementView .Searchbar .SearchBarHolder .Space2{ width: 0px; } #TimetrackingmanagementView .Table{ margin:0px; width: 100%; height: calc(100% - 50px); } } /* filename: ../app/css/views/settings/NewseditorView.css */ #NewseditorView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); container-name: NewseditorView; container-type: inline-size; } #NewseditorView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #NewseditorView .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #NewseditorView .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: left; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #NewseditorView .TitleMenuButton{ position: absolute; display: block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 30px; background-position: 0px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #NewseditorView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #NewseditorView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #NewseditorView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #NewseditorView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #NewseditorView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #NewsEditorInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); } .FileMenuItem:hover{ background-color: var(--color-lighter-gray--); font-weight: bold; } #NewsEditorInnerHolder .ql-toolbar.ql-snow { margin: 0 auto !important; margin-top: 5px !important; margin-bottom: 5px !important; width: 800px !important; background-color: var(--color-white--) !important; border: 1px var(--color-light-gray--) solid !important; direction: ltr; line-height: 38px; } #NewsEditorInnerHolder .ql-snow .ql-picker { height: 40px !important; } #NewsEditorInnerHolder .ql-snow .ql-picker { height: 40px !important; } #NewsEditorInnerHolder .ql-snow .ql-color-picker, .ql-snow .ql-icon-picker { top: 2px; } #NewseditorView #NewseditorViewEditor{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 800px; height: calc(100% - 72px); overflow: hidden; overflow-y: auto; font-size: 16px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; } #NewseditorView #NewseditorViewEditor img{ padding:5px; border-radius: 10px; } #NewsEditorInnerHolder .quill { display: flex; flex-direction: column-reverse; border: none !important; } #NewsEditorInnerHolder .ql-snow{ .ql-picker{ &.ql-size{ .ql-picker-label, .ql-picker-item{ &::before{ content: attr(data-value) !important; } } } } } #NewsEditorInnerHolder .ql-snow .ql-picker-options .ql-picker-item{ text-align: left !important; padding: 0px; } #NewsEditorInnerHolder .ql-snow .ql-picker.ql-expanded .ql-picker-options { display: block; margin-top: -1px; top: 100%; height: auto; max-height: 300px; overflow-y: auto; } #NewsEditorInnerHolder .ql-container { font-size: 20px !important; } #NewsEditorInnerHolder .ql-snow .ql-picker.ql-font .ql-picker-label { display: inline-block; max-width: 100px; padding-left: 4px; padding-right: 14px; overflow: hidden; white-space: nowrap; } #NewsEditorInnerHolder .ql-snow .ql-picker.ql-font .ql-picker-label::before { display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } #editor-resizer .toolbar { top: calc(50% - 40px) !important; border: unset !important; width: 12em !important; background-color: rgba(0,0,0,0.5) !important; border-radius: 8px !important; } #editor-resizer .toolbar .group { color: var(--color-white--) !important; } #editor-resizer .toolbar .group .input-wrapper input { background-color: rgba(0,0,0,0.3) !important; } @media only screen and (max-width: 700px) { #NewseditorView .Titlebar .Title{ width: calc(100% - 86px) !important; } } @container NewseditorView (width < 800px){ #NewsEditorInnerHolder{ width: 100%; } #NewsEditorInnerHolder .ql-toolbar.ql-snow { margin: 0 auto !important; width: 100% !important; } #NewsEditorInnerHolder .ql-toolbar.ql-snow .ql-formats { margin-right: 2px; margin-left: 2px; } #NewsEditorInnerHolder .ql-snow .ql-picker.ql-expanded .ql-picker-options { display: block; margin-top: -1px; top: 100%; overflow-y: auto; } #NewseditorView #NewseditorViewEditor{ top: 2px; left: 0px; width: calc(100% - 6px); height: calc(100% - 102px); background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; } } /* filename: ../app/css/views/settings/UsersettingsView.css */ #UsersettingsView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); container-name: UsersettingsView; container-type: inline-size; } #UsersettingsView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #UsersettingsView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #UsersettingsView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #UsersettingsView .UserSettingsHolder{ position: relative; display: block; margin:0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; overflow-y: auto; } #UsersettingsView .UserSettingsHolder .InnerHolder { position: relative; display: block; top: 0; left: 0; margin: 0 auto; padding: 0px 20px 20px 20px; max-width: 800px; min-height: calc(100% - 43px); height: auto; text-align: center; background-color: var(--color-scheme-white--); overflow: hidden; transition: 0.3s; } #UsersettingsView .UserSettingsHolder .InnerHolder .SettingsTitleText{ position: relative; display: block; margin-top: 20px; margin-bottom: 20px; width: calc(100% - 20px); height: 40px; top: 0px; left: 10px; right: 10px; font-family: var(--primary-font--); font-size: 20px; line-height: 20px; text-align: start; unicode-bidi: plaintext; font-weight: bold; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-gray--) solid; } #UsersettingsView .UserSettingsHolder .InnerHolder .LanguageSettingsHolder{ position: relative; display: block; margin: 0 auto; margin-top: 40px; top: 0px; left: 0px; width: calc(100% - 40px); height: auto; min-height: 140px; text-align: start; border-bottom: 1px var(--color-dark-gray--) solid; text-align: start; } #UsersettingsView .UserSettingsHolder .InnerHolder .LanguageSettingsHolder .Title{ position: relative; display: block; margin: 0 auto; margin-bottom: 10px; padding: 0px 10px 0px 10px; width: calc(100% - 20px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); } #UsersettingsView .UserSettingsHolder .InnerHolder .LanguageSettingsHolder .Text{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; padding: 0px 10px 0px 10px; width: calc(100% - 130px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 22px; text-align: start; unicode-bidi: plaintext; font-weight: normal; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } .UsersettingsLanguageMenuButton{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; padding-left: 18px; padding-right: 0px; width: 80px; height: 40px; line-height: 40px; vertical-align: middle; background-color: var(--color-light-blue--); text-align: center; cursor: pointer; transition: 0.3s; direction: ltr !important; border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 20px; } .UsersettingsLanguageMenuButton_rtl{ padding-left: 0px; padding-right: 18px; } .UsersettingsLanguageMenuButton::before { content: "▼"; font-size: 10px; color: var(--primary-text-color-dark-gray--); position: absolute; left: 10px; top: 22px; transform: translateY(-50%); pointer-events: none; } .UsersettingsLanguageMenuButton_rtl::before { left: auto; right: 10px; } .UsersettingsLanguageMenuButton:active{ background-color: var(--primary-brand-color-ligher-blue--); transition: 0.3s; } .LangageMenuButtonFlag{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; width: 30px; height: 20px; vertical-align: middle; background-size: 30px 20px; background-position: 0px 0px; background-repeat: no-repeat; border: 2px var(--color-scheme-white--) solid; overflow: hidden; } .LangageMenuButtonInitials{ position: relative; display: inline-block; margin-left: 0px; margin-right: 4px; height: 20px; font-family: var(--primary-font--); font-size: 18px; line-height: 20px; text-align: center; vertical-align: middle; } #UsersettingsView .UsersettingsLanguageMenuButton .LanguageMenu{ position: absolute; display: none; top: 48px; left: 5px; padding: 5px; width: 80px; height: auto; min-height: 100px; background-color: #ffffff; box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); z-index: 1000; } #UsersettingsView .UsersettingsLanguageMenuButton .LanguageMenu .Button{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 50px; border-bottom: 1px var( --color-light-gray--) solid; background-color: #ffffff; transition: 0.3s; cursor: pointer; } #UsersettingsView .UsersettingsLanguageMenuButton .LanguageMenu .Button:first-child{ /*margin-top: 5px;*/ } #UsersettingsView .UsersettingsLanguageMenuButton .LanguageMenu .Button:last-child{ border-bottom: 0px; } #UsersettingsView .UsersettingsLanguageMenuButton .LanguageMenu .Button:hover{ background-color: var(--primary-brand-color-blue--); transition: 0.3s; } #UsersettingsView .UsersettingsLanguageMenuButton .LanguageMenu .Button .Flag{ position: relative; display: inline-block; margin-top: 10px; margin-left: 5px; width: 30px; height: 20px; vertical-align: middle; background-size: 30px 20px; background-position: 0px 0px; background-repeat: no-repeat; border: 2px var(--color-scheme-white--) solid; overflow: hidden; } #UsersettingsView .UsersettingsLanguageMenuButton .LanguageMenu .Button .Initials{ position: relative; display: inline-block; margin-top: 10px; margin-left: 5px; margin-right: 5px; padding-right: 5px; font-family: var(--primary-font--); color: var(--primary-text-color-dark-gray--); font-size: 18px; line-height: 18px; text-align: center; vertical-align: middle; } #UsersettingsView .UsersettingsLanguageMenuButton .LanguageMenu .Button:hover .Initials{ color: var(--primary-text-color-white--); } @media only screen and (max-width: 780px) { #UsersettingsView .UserSettingsHolder .InnerHolder .LanguageSettingsHolder { margin: 20px 10px 10px 10px; padding-bottom: 20px; width: calc(100% - 20px); } #UsersettingsView .UserSettingsHolder .InnerHolder .LanguageSettingsHolder .Text{ width: calc(100% - 130px); } } @media only screen and (max-width: 700px) { #UsersettingsView .Titlebar .Title{ width: calc(100% - 90px); } #UsersettingsView .UserSettingsHolder .InnerHolder{ padding: 0px; width: 100%; } #UsersettingsView .UserSettingsHolder .InnerHolder .LanguageSettingsHolder .UsersettingsLanguageMenuButton { margin-top: 20px; } } /* filename: ../app/css/views/settings/FormsmanagementView.css */ #FormsmanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: FormsmanagementView; container-type: inline-size; } #FormsmanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #FormsmanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #FormsmanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #FormsmanagementView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #FormsmanagementView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #FormsmanagementView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #FormsmanagementView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #FormsmanagementView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #FormsmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #FormsmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #FormsmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #FormsmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #FormsmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #FormsmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #FormsmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #FormsmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #FormsmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #FormsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #FormsmanagementView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsmanagementView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #FormsmanagementView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #FormsmanagementView .TableTitleHolder{ position: relative; display: block; top: 0px; left: 0px; margin:0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: calc(100% - 10px); height: 50px; border-bottom: 1px var(--primary-brand-color-blue--) solid; overflow: hidden; } #FormsmanagementView .TableHolder{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; margin-top:0px; margin-bottom: 10px; width: 100%; height: calc(100% - 102px); overflow-x: hidden; overflow-y: auto; } #FormsmanagementView .FormTableTitle{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: left; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormsmanagementView .FormTableTitle .Clickable{ cursor: pointer; } #FormsmanagementView .FormTableItem{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: left; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; } #FormsmanagementView .FormTableItem:last-child{ margin-bottom: 49px; } #FormsmanagementView .EmptyFormTableItem{ position: relative; display: block; padding: 0px; margin: 0 auto; top: calc(50% - 50px); width: calc(100% - 20px); min-height: 50px; height: auto; font-family: var(--primary-font--); text-align: center; font-size: 16px; line-height: 20px; color: var(--primary-text-color-gray--); line-break: auto; overflow: hidden; } #FormsmanagementView .FormTitleIcon{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 50px; height: 50px; vertical-align: middle; overflow: hidden; } #FormsmanagementView .FormTableItem .FormTemplateIcon{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 50px; height: 50px; background-image: url('/assets/images/icons/form_template_black.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsmanagementView .FormTableItem .MenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 50px; width: 40px; vertical-align: middle; background-position: 10px 5px; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } #FormsmanagementView .FormTableItem .MenuButton .TableItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 48px; left: -174px; width: 190px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #FormsmanagementView .FormTableItem .MenuButton .TableItemMenu_rtl { left: 0px; } #FormsmanagementView .FormTableItem .MenuButton .TableItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #FormsmanagementView .FormTableItem .MenuButton .TableItemMenu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #FormsmanagementView .FormTableItem .MenuButton .TableItemMenu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #FormsmanagementView .FormTableItem .TableItemHolder{ position: relative; display: inline-block; top: 0px; width: auto; height: 50px; vertical-align: top; overflow: hidden; } #FormsmanagementView .FormTableItem .TableItemHolder .TableItemTitle{ position: relative; display: none; top: 0px; left: 0px; margin: 0 auto; margin-top: 2px; padding: 0px; width: calc(100% - 20px); height: 25px; font-family: var(--primary-font--); font-size: 14px; line-height: 25px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #FormsmanagementView .InnerHolder .FormName{ position: relative; display: inline-block; top: 0px; width: calc(100% - 680px); min-width: 200px; height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsmanagementView .Time{ position: relative; display: inline-block; top: 0px; width: 160px; height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsmanagementView .Username{ position: relative; display: inline-block; top: 0px; width: 200px; height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsmanagementView .ProfilePicture{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 30px; height: 30px; background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; vertical-align: middle; border-radius: 20px; overflow: hidden; } #FormsmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #FormsmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } #FormsmanagementView .InnerHolder .FormsViewTablePaginationHolder{ position: absolute; display: block; bottom: 0px; left: 0px; margin: 0 auto; margin-top:0px; text-align: center; width: 100%; height: 50px; background-color: rgba(255,255,255,0.6); border-top: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; } #FormsmanagementView .InnerHolder .FormsViewTablePaginationHolder .PaginationInnerHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 280px; height: 38px; background-color: var(--color-scheme-white--); border-radius: 20px; border: 1px var(--color-scheme-gray-l2--) solid; } #FormsmanagementView .InnerHolder .FormsViewTablePaginationHolder .PaginationInnerHolder .PreviousPageButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 36px; height: 36px; background-image: url(/assets/images/icons/arrow_left_black.svg); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; opacity: 0.8; overflow: hidden; cursor: pointer; } #FormsmanagementView .InnerHolder .FormsViewTablePaginationHolder .PaginationInnerHolder .PreviousPageButton.PreviousPageButton_rtl{ background-image: url(/assets/images/icons/arrow_right_black.svg); } #FormsmanagementView .InnerHolder .FormsViewTablePaginationHolder .PaginationInnerHolder .PageInfoHolder{ position: relative; display: inline-block; padding-left: 15px; padding-right: 15px; width: 178px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; direction: ltr; color: var(--primary-text-color-dark-gray--); vertical-align: middle; overflow: hidden; } #FormsmanagementView .InnerHolder .FormsViewTablePaginationHolder .PaginationInnerHolder .NextPageButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 36px; height: 36px; background-image: url(/assets/images/icons/arrow_right_black.svg); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; opacity: 0.8; overflow: hidden; cursor: pointer; } #FormsmanagementView .InnerHolder .FormsViewTablePaginationHolder .PaginationInnerHolder .NextPageButton.NextPageButton_rtl{ background-image: url(/assets/images/icons/arrow_left_black.svg); } @container FormsmanagementView (max-width: 890px){ #FormsmanagementView .Searchbar .Space1{ width: calc(50% - 190px); } #FormsmanagementView .Searchbar .Space2{ width: calc(50% - 355px); } #FormsmanagementView .InnerHolder .FormName{ width: calc(100% - 430px); } #FormsmanagementView .Username{ display: none; } #FormsmanagementView .ProfilePicture{ display: none; } } /* @container FormsmanagementView (max-width: 750px){ #FormsmanagementView .Searchbar .SearchBarHolder .InfoHolder { border-radius: 10px; } #FormsmanagementView .Searchbar .Space1{ display: none; } #FormsmanagementView .Searchbar .Space2{ width: calc(100% - 540px); } } */ @media only screen and (max-width: 700px){ #FormsmanagementView .Titlebar .Title{ width: calc(100% - 126px); } } @container FormsmanagementView (max-width: 700px) { #FormsmanagementView .LastModified{ display: none; } #FormsmanagementView .Searchbar{ height: 50px; } #FormsmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #FormsmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #FormsmanagementView .TableTitleHolder{ display: none; } #FormsmanagementView .CreationTime{ display: none; } #FormsmanagementView .InnerHolder{ height: calc(100% - 53px); } #FormsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #FormsmanagementView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #FormsmanagementView .Searchbar .SearchBarHolder .Space2{ width: 0px; display: none; } #FormsmanagementView .TableTitleHolder{ display: none; } #FormsmanagementView .TableHolder{ margin: 0 auto; width: calc(100% - 10px); height: calc(100% - 53px); } #FormsmanagementView .FormTableItem:last-child{ margin-bottom: 53px; } #FormsmanagementView .FormTableItem .FormTemplateIcon { position: relative; display: inline-block; top: 0px; margin-left: 0px; margin-right: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; background-color: var(--color-white--); overflow: hidden; } #FormsmanagementView .InnerHolder .FormName{ width: calc(100% - 40px); background-color: var(--color-white--); } #FormsmanagementView .ProfilePicture{ display: none; } #FormsmanagementView .Searchbar .SearchBarHolder .SearchField { width: calc(100% - 20px); } #FormsmanagementView .Searchbar .SearchBarHolder .Space{ width: calc(50% - 172px) !important; } #FormsmanagementView .FormTableFieldNames{ display: none; } #FormsmanagementView .Searchbar{ height: 50px; } #FormsmanagementView .Searchbar .SearchBarHolder{ margin-top: 5px; } #FormsmanagementView .Searchbar .SearchBarHolder .FilterControlsHidden{ display: none; } #FormsmanagementView .Searchbar .SearchBarHolder .SearchFieldOnly { margin-left: 5px; margin-right: 5px; width: calc(100% - 10px) !important; } #FormsmanagementView .Searchbar .SearchField input[type=text]{ width: 100% !important; } #FormsmanagementView .FormTableFieldNames{ display: none; } #FormsmanagementView .AssignedToMe .CreationTimeIcon { display: none !important; opacity: 0.0; } #FormsmanagementView .FormTableItem .LastModified { display: none; } #FormsmanagementView .Searchbar .SearchBarHolder .FilterControlsHolder { width: 120px; margin-left: 0px; margin-right: 0px; } #FormsmanagementView .FormTableItem { border: 1px var(--color-light-gray--) solid; margin-top: 3px; height: 172px; width: calc(100% - 3px); line-height: 0px; border: 1px var(--color-light-gray--) solid; background-color: var(--color-superlight-gray--); } #FormsmanagementView .FormTableItem .TableItemHolder{ width: 50%; height: 60px; overflow: hidden; border-top: 1px var(--color-lighter-gray--) solid; } #FormsmanagementView .FormTableItem .TableItemHolder .TableItemTitle{ display: block; } #FormsmanagementView .FormTableItem .Time { position: relative; display: inline-block; margin: 0 auto; margin-top: 1px; padding: 0px; width: calc(100% - 42px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormsmanagementView .FormTableItem .CreationTime{ width: calc(100% - 42px); padding-left: 10px; padding-right: 10px; } #FormsmanagementView .FormTableItem .LastModified{ width: calc(100% - 42px); padding-left: 10px; padding-right: 10px; } #FormsmanagementView .FormTableItem .Username{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-right: 0px; margin-left: 0px; width: calc(100% - 42px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormsmanagementView .FormTableItem .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-left: 10px; margin-right: 10px; margin-top: 5px; padding: 0px; top: 0px; height: 20px; width: 20px; vertical-align: top; background-position: 0px 0px; background-repeat: no-repeat; background-size: 20px 20px; border-radius: 10px; overflow: hidden; opacity: 1.0; } #FormsmanagementView .FormTableItem .MenuButton { position: absolute; display: block; margin: 0px; padding: 0px; top: 0px; left: calc(100% - 40px); height: 50px; width: 40px; background-position: 10px 5px; background-image: url(/assets/images/icons/menu_dots_black.svg); background-repeat: no-repeat; background-size: 20px 40px; background-color: var(--color-white--); cursor: pointer; } #FormsmanagementView .TableItem_rtl .MenuButton { left: 0px !important; } } @container FormsmanagementView (max-width: 540px){ #FormsmanagementView .Searchbar{ height: 50px; } #FormsmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #FormsmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #FormsmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #FormsmanagementView .Searchbar .SearchBarHolder .InfoHolder { display: none; } #FormsmanagementView .Searchbar .Space2{ display: none; } #FormsmanagementView .TableTitleHolder{ display: none; } #FormsmanagementView .InnerHolder .FormName { width: calc(100% - 80px); } #FormsmanagementView .CreationTime{ display: none; } } @media only screen and (hover: hover) and (min-width: 781px){ #FormsmanagementView .FormTableItem:hover{ background-color: var(--color-lighter-gray--); } #FormsmanagementView .FormTableItem .MenuButton .TableItemMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #FormsmanagementView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } } /* filename: ../app/css/views/settings/EventsmanagementView.css */ #EventsmanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: EventsmanagementView; container-type: inline-size; } #EventsmanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #EventsmanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #EventsmanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #EventsmanagementView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #EventsmanagementView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #EventsmanagementView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #EventsmanagementView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #EventsmanagementView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #EventsmanagementView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #EventsmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #EventsmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #EventsmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #EventsmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #EventsmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #EventsmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #EventsmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #EventsmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #EventsmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #EventsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #EventsmanagementView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #EventsmanagementView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #EventsmanagementView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #EventsmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #EventsmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @media only screen and (max-width: 700px) { #EventsmanagementView .Titlebar .Title{ width: calc(100% - 126px); } } @media only screen and (max-width: 780px) { #EventsmanagementView .InnerHolder{ height: calc(100% - 40px); } #EventsmanagementView .Searchbar{ height: 50px; } #EventsmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #EventsmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #EventsmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #EventsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #EventsmanagementView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #EventsmanagementView .Searchbar .SearchBarHolder .Space2{ width: 0px; } #EventsmanagementView .Table{ margin:0px; width: 100%; height: calc(100% - 50px); } } /* filename: ../app/css/views/settings/EulaView.css */ #EulaView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; background-color: var(--view-background-color--); overflow: hidden; } #EulaView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #EulaView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #EulaView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #EulaView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: center; background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #EulaView .InnerHolder .InfoHolder{ position: relative; display: block; margin: 0 auto; padding: 0px 20px 20px 20px; width: auto; max-width: 800px; height: auto; min-height: calc(100% - 20px); text-align: center; background-color: var(--color-scheme-white--); } #EulaView .InnerHolder .InfoHolder .TitleText{ position: relative; display: block; margin: 0 auto; margin-bottom: 20px; padding: 0px; width: calc(100% - 20px); height: 60px; font-family: var(--primary-font--); font-size: 20px; line-height: 60px; text-align: start; unicode-bidi: plaintext; font-weight: bold; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-gray--) solid; } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; text-align: left; width: calc(100% - 20px); height: auto; } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder .TOC{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-bottom: 20px; text-align: inherit; width: calc(100% - 20px); height: auto; } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder .TOC .Title{ position: relative; display: block; margin: 0 auto; margin-bottom: 20px; padding: 0px; padding-top: 20px; width: 100%; height: auto; font-family: var(--primary-font--); font-size: 22px; line-height: 40px; text-align: inherit; font-weight: bold; color: var(--primary-text-color-brand-blue--); } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder .TOC .Item{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 20px; padding-right: 20px; width: calc(100% - 40px); height: auto; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: inherit; font-weight:normal; color: var(--primary-text-color-brand-blue--); } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder .TOC .Item::before { content: "•"; position: absolute; inset-inline-start: 0; top: 0; color: var(--primary-text-color-brand-blue--); font-size: 1em; line-height: 1; } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder .Topic{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 20px); height: auto; font-family: var(--primary-font--); font-size: 20px; line-height: 80px; text-align: inherit; font-weight: bold; color: var(--primary-text-color-brand-blue--); } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder .Title{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 20px; padding: 0px; width: calc(100% - 20px); height: auto; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: inherit; font-weight:bold; color: var(--primary-text-color-dark-gray--); } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder .Item{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 20px; padding-right: 20px; width: calc(100% - 40px); height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: inherit; font-weight:normal; color: var(--primary-text-color-dark-gray--); } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder .Item::before { content: "•"; position: absolute; inset-inline-start: 0; top: 0; color: var(--primary-text-color-dark-gray--); font-size: 1em; line-height: 1; } @media only screen and (max-width: 700px) { #EulaView .Titlebar .Title{ width: calc(100% - 90px); } #EulaView .InnerHolder .InfoHolder{ padding: 0px 5px 5px 5px; width: calc(100% - 10px); min-height: calc(100% - 5px); } #EulaView .InnerHolder .InfoHolder .TitleText{ display: none; } #EulaView .InnerHolder .InfoHolder .LegalNoticeHolder .TOC{ padding-bottom: 0px; } } /* filename: ../app/css/views/settings/MailboxsettingsView.css */ #MailboxsettingsView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: MailboxsettingsView; container-type: inline-size; } #MailboxsettingsView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #MailboxsettingsView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #MailboxsettingsView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #MailboxsettingsView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #MailboxsettingsView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #MailboxsettingsView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #MailboxsettingsView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #MailboxsettingsView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #MailboxsettingsView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #MailboxsettingsView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #MailboxsettingsView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #MailboxsettingsView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #MailboxsettingsView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #MailboxsettingsView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #MailboxsettingsView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #MailboxsettingsView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #MailboxsettingsView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #MailboxsettingsView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #MailboxsettingsView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #MailboxsettingsView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #MailboxsettingsView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #MailboxsettingsView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #MailboxsettingsViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #MailboxsettingsViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @media only screen and (max-width: 700px) { #MailboxsettingsView .Titlebar .Title{ width: calc(100% - 126px) !important; } } @media only screen and (max-width: 780px) { #MailboxsettingsView .InnerHolder{ height: calc(100% - 40px); } #MailboxsettingsView .Searchbar{ height: 50px; } #MailboxsettingsView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #MailboxsettingsView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #MailboxsettingsView .Searchbar .SearchField input[type=text]{ width: 100%; } #MailboxsettingsView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #MailboxsettingsView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #MailboxsettingsView .Searchbar .SearchBarHolder .Space2{ width: 0px; } #MailboxsettingsView .Table{ margin:0px; width: 100%; height: calc(100% - 50px); } } /* filename: ../app/css/views/settings/MailboxsettingseditorView.css */ #MailboxsettingseditorView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); } #MailboxsettingseditorView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #MailboxsettingseditorView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #MailboxsettingseditorView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #MailboxsettingseditorView .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #MailboxsettingseditorView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #MailboxsettingseditorView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #MailboxsettingseditorView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #MailboxsettingseditorView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #MailboxsettingseditorView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #MailboxsettingseditorView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } @media only screen and (max-width: 700px) { #MailboxsettingseditorView .Titlebar .Title{ width: calc(100% - 86px) !important; } } /* filename: ../app/css/views/settings/KiosksmanagementView.css */ #KiosksmanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: KiosksmanagementView; container-type: inline-size; } #KiosksmanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #KiosksmanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #KiosksmanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #KiosksmanagementView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #KiosksmanagementView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #KiosksmanagementView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #KiosksmanagementView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #KiosksmanagementView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #KiosksmanagementView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #KiosksmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #KiosksmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #KiosksmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #KiosksmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #KiosksmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #KiosksmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #KiosksmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #KiosksmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #KiosksmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #KiosksmanagementView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #KiosksmanagementView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #KiosksmanagementView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #KiosksmanagementView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #KiosksmanagementView .InnerHolder .KiosksmanagementViewKiosksTableHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: left; background-color: var(--color-superlight-gray--); } #KiosksmanagementView .InnerHolder .KiosksmanagementViewKiosksTableHolder .KiosksmanagementViewKiosksTitleHolder{ position: relative; display: block; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--primary-brand-color-blue--) solid; } #KiosksmanagementView .InnerHolder .KiosksmanagementViewKiosksTableHolder .KiosksmanagementViewKiosksTitleHolder .KiosksmanagementViewKiosksTitle{ position: relative; display: inline-block; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; font-weight: bold; text-align: inherit; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-white--); border-bottom: 1px var(--primary-brand-color-blue--) solid; } #KiosksmanagementView .InnerHolder .KiosksmanagementViewKiosksTableHolder .KiosksmanagementViewKiosksTable{ position: relative; display: block; width: 100%; height: calc(100% - 51px); text-align: inherit; overflow-x: hidden; overflow-y: auto; } #KiosksmanagementView .TableItem{ position: relative; display: block; margin: 0px; padding: 0px; width: 100%; height: 50px; text-align: inherit; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; } #KiosksmanagementView .KiosksmanagementViewKiosksTable .EmptyTableItem{ position: relative; display: block; top: calc(50% - 50px); left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; } #KiosksmanagementView .TableItem .ItemID{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 20px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #KiosksmanagementView .TableItem .ItemTitle{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 200px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #KiosksmanagementView .TableItem .ItemAddress{ position: relative; display: inline-block; width: calc(100% - 402px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #KiosksmanagementView .TableItem .ItemStatus{ position: relative; display: inline-block; width: 120px; height: 50px; vertical-align: middle; overflow: hidden; } #KiosksmanagementView .TableItem .ItemStatus .Indicator{ position: relative; display: inline-block; margin-left: 4px; margin-right: 4px; width: 12px; height: 12px; vertical-align: middle; border-radius: 10px; border: 1px var(--color-scheme-white--) solid; } #KiosksmanagementView .TableItem .ItemStatus .Online{ background-color: var(--color-green--); } #KiosksmanagementView .TableItem .ItemStatus .Offline{ background-color: var(--color-red--); } #KiosksmanagementView .TableItem .ItemStatus .Info{ position: relative; display: inline-block; width: calc(100% - 22px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* */ #KiosksmanagementView .TableItem .MenuButton{ position: relative; display: inline-block; margin: 0px; margin-top: 3px; padding: 0px; top: 0px; right: 0px; height: 50px; width: 20px; vertical-align: middle; background-position: 0px 3px; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } #KiosksmanagementView .TableItem .MenuButton .TableItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 48px; left: -162px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } .TableItemMenu_rtl{ left: 0px !important; } #KiosksmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #KiosksmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #KiosksmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } /**/ .KiosksmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } .KiosksmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @container KiosksmanagementView (max-width: 780px){ #KiosksmanagementView .Searchbar{ height: 50px; } #KiosksmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #KiosksmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #KiosksmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #KiosksmanagementView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #KiosksmanagementView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #KiosksmanagementView .Searchbar .SearchBarHolder .Space2{ width: 0px; } } @media only screen and (max-width: 700px) { #KiosksmanagementView .Titlebar .Title{ width: calc(100% - 126px); } #KiosksmanagementView .TableItem .ItemTitle{ width: calc(100% - 200px); } #KiosksmanagementView .TableItem .ItemAddress{ display: none; } } @media only screen and (max-width: 780px) { #KiosksmanagementView .InnerHolder{ height: calc(100% - 40px); } #KiosksmanagementView .Table{ margin:0px; width: 100%; height: calc(100% - 50px); } } @media only screen and (hover: hover) and (min-width: 781px){ #KiosksmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #KiosksmanagementView .Titlebar .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #KiosksmanagementView .TableItem:hover{ background-color: var(--color-lighter-gray--); border-bottom: 1px var(--color-light-gray--) solid; } } /* filename: ../app/css/views/settings/KioskeditorView.css */ #KioskeditorView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: left; background-color: var(--color-lighter-gray--); overflow: hidden; container-name: KioskeditorView; container-type: inline-size; } #KioskeditorView .KioskeditorViewTitlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #KioskeditorView .KioskeditorViewTitlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #KioskeditorView .KioskeditorViewTitlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #KioskeditorView .KioskeditorViewTitlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #KioskeditorView .KioskeditorViewTitlebar .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #KioskeditorView .KioskeditorViewTitlebar .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #KioskeditorView .KioskeditorViewTitlebar .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #KioskeditorView .KioskeditorViewTitlebar .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #KioskeditorView .KioskeditorViewTitlebar .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #KioskeditorView .KioskeditorViewInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-superlight-gray--); overflow-x: hidden; overflow-y: auto; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; padding-top: 10px; padding-left: 200px; padding-right: 200px; padding-bottom: 70px; top: 0px; left: 0px; width: 400px; height: auto; min-height: calc(100% - 30px); text-align: left; background-color: var(--color-white--); } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .TopOfPageIcon{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; width: 50px; height: 50px; background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .KioskeditorViewKioskIDTitle{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .InputTitle{ position: relative; display: block; margin: 0px; margin-top: 10px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder input[type=text], #KioskeditorView .KioskeditorViewInnerHolder .FormHolder input[type=password]{ position: relative !important; display: block !important; padding: 12px 20px !important; margin: 0 auto !important; margin-bottom: 20px !important; width: 100% !important; height: 50px !important; font-size: 18px !important; line-height: 38px !important; box-sizing: border-box !important; border: none !important; background-color: #f0f0f0 !important; color: var(--primary-text-color-dark-gray--) !important; border-bottom: 1px solid #e0e0e0 !important; border-radius: 10px !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder input[type=text]:focus, #KioskeditorView .KioskeditorViewInnerHolder .FormHolder input[type=password]:focus { background-color: var(--color-light-gray--) !important; outline: none; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder #KioskeditorViewKioskAddress{ margin-bottom: 20px; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .LocationsSelectionDropdown { position: relative; display: block; margin: 0px; margin-bottom: 20px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .LocationsHolder{ position:relative; display: block; margin: 0 auto; margin-bottom: 40px; padding: 0px; width: 100%; height: 50px; border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; background-color: var(--color-scheme-white--); cursor: pointer; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .LocationsHolder .LocationIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-image: url('/assets/images/icons/domain_black.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 10px 10px; overflow: hidden; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .LocationsHolder .LocationName{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-right: 50px; width: calc(100% - 100px); height: 50px; vertical-align: middle; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; color: var(--primary-text-color-dark-gray--); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .LocationsHolder .LocationName_rtl{ padding-left: 50px; padding-right: unset; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .LocationsHolder .LocationMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 52px; left: 0px; width: 100%; height: auto; min-height: 50px; max-height: 205px; background-color: var(--color-scheme-white--); border-top: 1px var(--color-scheme-gray-l1--) solid; border-bottom: 1px var(--color-scheme-gray-l1--) solid; border-left: 1px var(--color-scheme-gray-l1--) solid; border-right: 1px var(--color-scheme-gray-l1--) solid; border-radius: 10px; filter: drop-shadow(rgba(0, 0, 0, 0.4) 2px 2px 2px); transform: translateZ(0px); overflow-x: hidden; overflow-y: auto; cursor: pointer; z-index: 1000; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .LocationsHolder .LocationMenu .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 50px; font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .LocationsHolder .LocationMenu .MenuItem:last-child{ border-bottom: unset; } /***/ #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .KioskTypeSelectionDropdown { position: relative; display: block; margin: 0px; margin-bottom: 20px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .KioskTypesHolder{ position:relative; display: block; margin: 0 auto; margin-bottom: 40px; padding: 0px; width: 100%; height: 50px; border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; background-color: var(--color-scheme-white--); cursor: pointer; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .KioskTypesHolder .KioskTypeIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-image: url('/assets/images/icons/kiosk_black.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 10px 10px; overflow: hidden; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .KioskTypesHolder .KioskTypeName{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-right: 50px; width: calc(100% - 100px); height: 50px; vertical-align: middle; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; color: var(--primary-text-color-dark-gray--); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .KioskTypesHolder .KioskTypeName_rtl{ padding-left: 50px; padding-right: unset; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .KioskTypesHolder .KioskTypeMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 52px; left: 0px; width: 100%; height: auto; min-height: 50px; max-height: 205px; background-color: var(--color-scheme-white--); border-top: 1px var(--color-scheme-gray-l1--) solid; border-bottom: 1px var(--color-scheme-gray-l1--) solid; border-left: 1px var(--color-scheme-gray-l1--) solid; border-right: 1px var(--color-scheme-gray-l1--) solid; border-radius: 10px; filter: drop-shadow(rgba(0, 0, 0, 0.4) 2px 2px 2px); transform: translateZ(0px); overflow-x: hidden; overflow-y: auto; cursor: pointer; z-index: 1000; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .KioskTypesHolder .KioskTypeMenu .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 50px; font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .KioskTypesHolder .KioskTypeMenu .MenuItem:last-child{ border-bottom: unset; } #KioskeditorView .KioskeditorViewInnerHolder .KioskAccessSettingsButton{ position: relative; display: block; margin: 0 auto; margin-bottom: 40px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; color: var(--primary-text-color-dark-gray--); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; background-color: var(--color-scheme-white--); cursor: pointer; } /****/ @container KioskeditorView (width < 800px) { #KioskeditorView .KioskeditorViewInnerHolder { background-color: var(--color-white--); } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder { padding: 0px; padding-top: 10px; width: 400px; } } @media only screen and (max-width: 700px) { #KioskeditorView .KioskeditorViewTitlebar .Title{ width: calc(100% - 86px) !important; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder{ width: calc(100% - 20px); } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder .InputTitle{ margin-top: 5px; } #KioskeditorView .KioskeditorViewInnerHolder .FormHolder #KioskeditorViewMapHolder{ width: 330px; height: 330px; } } /* filename: ../app/css/views/settings/NewsmanagementView.css */ #NewsmanagementView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); container-name: NewsmanagementView; container-type: inline-size; } #NewsmanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #NewsmanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #NewsmanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #NewsmanagementView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #NewsmanagementView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #NewsmanagementView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #NewsmanagementView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #NewsmanagementView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #NewsmanagementView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #NewsmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #NewsmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #NewsmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #NewsmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #NewsmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #NewsmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #NewsmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #NewsmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #NewsmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #NewsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #NewsmanagementView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #NewsmanagementView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #NewsmanagementView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #NewsmanagementView #NewsViewArticleTable{ position: relative; display: block; left: 0px; width: 100%; height: calc(100% - 51px); text-align: center; overflow-x: hidden; overflow-y: auto; } #NewsmanagementView #NewsViewArticleTable .EmptyNewsItem{ position: relative; display: block; top: calc(50% - 50px); left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; } #NewsmanagementView .NewsArticle{ position: relative; display: block; padding: 0 auto; padding-top: 30px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; top: 0px; left: 0px; width: calc(100% - 20px); max-width: 800px; height: auto; text-align: center; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; } #NewsmanagementView .NewsArticle .NewsArticleDateHolder{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 20px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: left; color: var(--primary-text-color-dark-gray--); background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; } #NewsmanagementView .NewsArticle .NewsArticlePublishStatus{ position: absolute; display: block; top: 0px; right: 0px; padding-right: 20px; width: 250px; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: right; color: var(--primary-text-color-dark-gray--); } #NewsmanagementView .NewsArticle img{ padding:5px; max-width: 98%; border-radius: 10px; } .NewsArticleMenuButton{ position: absolute; display: block; margin: 0px; padding: 0px; top: 36px; right: 4px; height: 40px; width: 30px; background-position: 3px 5px; background-image: url(/assets/images/icons/menu_dots_black.svg); background-repeat: no-repeat; background-size: 28px 28px; cursor: pointer; background-color: var(--color-white--); border-radius: 5px; } .NewsArticleMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 40px; left: -154px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #NewsmanagementView .NewsArticleMenu .NewsArticleMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #NewsmanagementView .NewsArticleMenu .NewsArticleMenuItem:hover{ background-color: var(--color-lighter-gray--); } #NewsmanagementView .NewsArticleMenu .NewsArticleMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #NewsmanagementView .NewsArticleMenu .NewsArticleMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #NewsmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #NewsmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } .NewsmamagementViewLoadingScreen{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: rgba(256, 255, 255, 0.2); overflow: hidden; } @media only screen and (max-width: 700px) { #NewsmanagementView .Titlebar .Title{ width: calc(100% - 126px); } } @media only screen and (max-width: 1250px) { #NewsmanagementView .Searchbar{ height: 50px; } #NewsmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #NewsmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #NewsmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #NewsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #NewsmanagementView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #NewsmanagementView .Searchbar .SearchBarHolder .Space2{ width: 0px; } } @media only screen and (max-width: 780px) { #NewsmanagementView .Table{ margin:0px; width: 100%; height: calc(100% - 50px); } } /* filename: ../app/css/views/settings/LocationsmanagementView.css */ #LocationsmanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: LocationsmanagementView; container-type: inline-size; } #LocationsmanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #LocationsmanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #LocationsmanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #LocationsmanagementView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #LocationsmanagementView .Titlebar .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #LocationsmanagementView .Titlebar .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #LocationsmanagementView .Titlebar .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #LocationsmanagementView .Titlebar .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #LocationsmanagementView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-white--); overflow: hidden; } #LocationsmanagementView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #LocationsmanagementView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 41px; text-align: left; vertical-align: middle; overflow: hidden; } #LocationsmanagementView .Searchbar .SearchField{ position: relative; display: inline-block; margin: 0 auto; margin-left:10px; width: 220px; height: 40px; vertical-align: top; } #LocationsmanagementView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #LocationsmanagementView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #LocationsmanagementView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #LocationsmanagementView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #LocationsmanagementView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #LocationsmanagementView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 165px); height: 40px; vertical-align: middle; } #LocationsmanagementView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #LocationsmanagementViewTablesHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 51px); background-color: var(--color-superlight-gray--); overflow: hidden; } #LocationsmanagementViewLocationsTableHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; background-color: var(--color-superlight-gray--); } #LocationsmanagementViewLocationsTitleHolder{ position: relative; display: block; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--primary-brand-color-blue--) solid; } #LocationsmanagementViewLocationsTitle{ position: relative; display: inline-block; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); vertical-align: middle; background-color: var(--color-white--); border-bottom: 1px var(--primary-brand-color-blue--) solid; } #LocationsmanagementViewLocationsTable{ position: relative; display: block; width: 100%; height: calc(100% - 51px); text-align: left; overflow-x: hidden; overflow-y: auto; } .LocationsmanagementViewLocationsTable_rtl{ text-align: right !important; } #LocationsmanagementView #LocationsmanagementViewLocationsTable .EmptyTableItem{ position: relative; display: block; top: calc(50% - 50px); left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; } #LocationsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: middle; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); border: 1px var(--color-light-gray--) solid; border-radius: 20px; } #LocationsmanagementView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #LocationsmanagementView .TableItem{ position: relative; display: block; margin: 0px; padding: 0px; width: 100%; height: 50px; text-align: inherit; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; } #LocationsmanagementView .TableItem .ItemID{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 20px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #LocationsmanagementView .TableItem .ItemTitle{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 200px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #LocationsmanagementView .TableItem .ItemAddress{ position: relative; display: inline-block; width: calc(100% - 282px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* */ #LocationsmanagementView .TableItem .MenuButton{ position: relative; display: inline-block; margin: 0px; margin-top: 3px; padding: 0px; top: 0px; right: 0px; height: 50px; width: 20px; vertical-align: middle; background-position: 0px 3px; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } #LocationsmanagementView .TableItem .MenuButton .TableItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 48px; left: -162px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } .TableItemMenu_rtl{ left: 0px !important; } #LocationsmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #LocationsmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #LocationsmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #LocationsmanagementViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #LocationsmanagementViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @container LocationsmanagementView (max-width: 780px){ #LocationsmanagementView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #LocationsmanagementView .Searchbar .SearchField input[type=text]{ width: 100%; } #LocationsmanagementView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #LocationsmanagementView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #LocationsmanagementView .Searchbar .SearchBarHolder .Space2{ width: 0px; } } @media only screen and (max-width: 700px) { #LocationsmanagementView .Titlebar .Title{ width: calc(100% - 126px) !important; } } @media only screen and (max-width: 780px) { #LocationsmanagementView .Searchbar{ height: 50px; } #LocationsmanagementView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #LocationsmanagementView .InnerHolder #LocationsmanagementViewTablesHolder{ padding-top: 0px; width: 100%; } #LocationsmanagementView .TableItem .ItemTitle{ width: calc(100% - 86px); } #LocationsmanagementView .TableItem .ItemAddress{ display: none; } #LocationsmanagementViewPositionsTitle{ width: 100%; } #LocationsmanagementView .InfoHolder{ display: none; } } @media only screen and (hover: hover) and (min-width: 781px){ #LocationsmanagementView .TableItem .MenuButton .TableItemMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #LocationsmanagementView .Titlebar .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #LocationsmanagementView .TableItem:hover{ background-color: var(--color-lighter-gray--); border-bottom: 1px var(--color-light-gray--) solid; } } /* filename: ../app/css/views/settings/PositioneditorView.css */ #PositioneditorView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--color-lighter-gray--); container-name: PositioneditorView; container-type: inline-size; } #PositioneditorView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #PositioneditorView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #PositioneditorView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #PositioneditorView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #PositioneditorView .Titlebar .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #PositioneditorView .Titlebar .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #PositioneditorView .Titlebar .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #PositioneditorView .Titlebar .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #PositioneditorView .Titlebar .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #PositioneditorView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-superlight-gray--); overflow-x: hidden; overflow-y: auto; } #PositioneditorView .InnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; padding-top: 10px; padding-left: 200px; padding-right: 200px; padding-bottom: 20px; top: 0px; left: 0px; width: 400px; height: auto; min-height: calc(100% - 30px); text-align: left; background-color: var(--color-white--); } #PositioneditorView .InnerHolder .FormHolder .TopOfPageIcon{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; width: 50px; height: 50px; background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; } #PositioneditorView .InnerHolder .FormHolder .PositioneditorViewPositionIDTitle{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #PositioneditorView .InnerHolder .FormHolder .InputTitle{ position: relative; display: block; margin: 0px; margin-top: 10px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #PositioneditorView .InnerHolder .FormHolder input[type=text]{ position: relative; display: block; padding: 10px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; box-sizing: border-box; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; transition: 0.2s; } #PositioneditorView .InnerHolder .FormHolder input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #PositioneditorView .InnerHolder .FormHolder #PositioneditorViewPositionDescription{ margin-bottom: 20px; } @container PositioneditorView (width < 800px) { #PositioneditorView .InnerHolder { background-color: var(--color-white--); } #PositioneditorView .InnerHolder .FormHolder { padding: 0px; padding-top: 10px; width: 400px; } } @media only screen and (max-width: 700px) { #PositioneditorView .Titlebar .Title{ width: calc(100% - 86px) !important; } #PositioneditorView .InnerHolder .FormHolder{ width: calc(100% - 20px); } #PositioneditorView .InnerHolder .FormHolder .InputTitle{ margin-top: 5px; } } /* filename: ../app/css/views/RegisterView.css */ #RegisterView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; font-family: var(--primary-font--); text-align: center; color: var(--primary-text-color-dark-gray--); overflow-x: hidden; overflow-y: hidden; } #RegisterView #RegisterTitle{ position: relative; display: block; top: 0px; left: 0px; margin-top:40px; margin-bottom: 30px; width: 100%; height: 50px; font-family: var(--primary-brand-font--); font-size: 40px; line-height: 40px; text-align: center; color: var(--primary-brand-color-blue--); } #RegisterView #RegisterForm{ position: relative; display: inline-block; top: 0px; left: 0px; padding: 50px; margin-bottom: 30px; width: 500px; min-height: 360px; height: auto; font-size: 12px; line-height: 20px; text-align: center; color: var(--primary-text-color-dark-gray--); background-color: #ffffff; border-radius: 20px; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } #RegisterView #RegisterForm #ErrorMessageHolder{ position: relative; display: inline-block; margin-top: 20px; top: 0px; left: 0px; width: 85%; min-height: 60px; height: auto; font-size: 20px; line-height: 28px; color: var(--primary-text-color-dark-gray--); } #RegisterView #RegisterForm input[type=text], #RegisterView #RegisterForm input[type=password]{ position: relative; display: block; width: 100%; height: 50px; padding: 12px 20px; margin: 20px 0; box-sizing: border-box; font-size: 18px; line-height: 38px; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; } #RegisterView #RegisterForm input[type=text]:focus, #RegisterView #RegisterForm input[type=password]:focus { background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } /* The message box is shown when the user clicks on the password field */ #RegisterView #RegisterForm .MessageHolder { position: relative; display: none; margin: 0px; padding: 0px; padding-bottom: 12px; top: 0px; left: 0px; width: 100%; font-family: var(--primary-font--); font-size: 40px; line-height: 40px; text-align: left; color: var(--primary-brand-color-blue--); } #RegisterView #RegisterForm .MessageHolder .MessageHolderTitle{ position: relative; display: block; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 30px; font-size: 16px; line-height: 30px; text-align: center; color: var(--primary-text-color-dark-gray--); } .MessageHolder p { position: relative; display: block; top: 0px; left: calc(50% - 100px); margin: 0px; padding: 0px; width: 200px; height: 30px; font-size: 16px; line-height: 30px; text-align: left; } /* Add a green text color and a checkmark when the requirements are right */ .valid { color: rgb(21, 106, 21); } /* Add a red text color and an "x" icon when the requirements are wrong */ .invalid { color: #b61a1a; } #RegisterView #RegisterForm .PasswordMissmatchMessageHolder{ position: relative; display: none; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 30px; font-size: 16px; line-height: 30px; text-align: center; color: #b61a1a; } #RegisterView #RegisterForm #RegisterButton{ position: relative; display: inline-block; width: 80%; height: 50px; padding: 12px 20px; margin: 20px 0; box-sizing: border-box; font-size: 18px; line-height: 25px; border: 1px var(--primary-brand-color-blue--) solid; border-radius: 30px; background-color: var(--primary-brand-color-blue--); color: #ffffff; cursor: pointer; transition: 0.3s; } #RegisterView #RegisterForm #RegisterButton:hover{ background-color: var(--primary-brand-color-dark-blue--); transition: 0.3s; } @media only screen and (max-width: 780px) { #RegisterView #RegisterTitle{ position: absolute; display: block; margin: 0px; padding: 0px; top: 30px; left: 0px; width: 100%; font-size: 36px; z-index: 1000; } #RegisterView #RegisterForm{ position: absolute; display: block; margin: 0px; padding: 0px; padding: 20px; padding-top: 80px; top: 0px; left: 0px; width: calc(100% - 40px); height: calc(100% - 100px); border-radius: 0px; border: none; } #RegisterView #RegisterForm #ErrorMessageHolder{ font-size: 18px; line-height: 22px; margin-top: 20px; margin-bottom: 0px; } } /* filename: ../app/css/views/FormView.css */ #FormView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; text-align: center; overflow: hidden; background-color: var(--color-lighter-gray--); container-name: FormView; container-type: inline-size; } #FormView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #FormView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #FormView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #FormView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-lighter-gray--) !important; } #FormView .InnerHolder .MenuBarHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100px; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .MenuBarHolder.NoButtons{ height: 50px; } #FormView .InnerHolder .MenuBar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; max-width: 720px; height: 100%; overflow: hidden; } #FormView .InnerHolder .FormNameHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 152px); height: 40px; vertical-align: middle; text-align: start; } #FormView .InnerHolder .FormNameHolder .FormNameIcon{ position: relative; display: inline-block; top: 0px; width: 40px; height: 40px; background-image: url(/assets/images/icons/form_file_black.svg); background-position: 0px 3px; background-size: 34px 34px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormView .InnerHolder .FormNameHolder .FormName{ position: relative; display: inline-block; width: auto; min-width: 100px; max-width: calc(100% - 40px); height: 32px; padding: 6px 10px 0px 6px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 24px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; border: none; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; vertical-align: middle; transition: 0.2s; overflow: hidden; } #FormView .InnerHolder .FormNameHolder [contenteditable="true"]:empty:before{ content: attr(placeholder); color: var(--color-heavy-gray--); font-style: italic; pointer-events: none; display: block; /* For Firefox */ } #FormView .InnerHolder .FormNameHolder [contenteditable="true"].FormName br { display:none; } #FormView .InnerHolder .FormNameHolder [contenteditable="true"].FormName * { display:inline; white-space:nowrap; } #FormView .InnerHolder .FormNameHolder .FormName:focus{ background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); width: calc(100% - 40px); outline: none; } #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; padding-left: 5px; padding-right: 5px; top: 0px; width: auto; width: 130px; height: 32px; border-radius: 16px; background-color: var(--primary-brand-color-blue--); vertical-align: middle; text-align: center; overflow: hidden; cursor: pointer; transition: 0.2s; } #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; max-width: 90px; height: 32px; font-size: 16px; line-height: 32px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; color: var(--color-white--); vertical-align: top; overflow: hidden; } #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton .PublishIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 32px; width: 32px; background-image: url('/assets/images/icons/publish_white.svg'); background-position: 7px 6px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: pointer; } #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton .UnpublishIcon{ background-image: url('/assets/images/icons/unpublish_white.svg') !important; } #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton .SubmitIcon{ background-image: url('/assets/images/icons/submit_white.svg') !important; } #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton .Icon_rtl{ transform: rotate(180deg); } #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #FormeditorView .InnerHolder .MenuBarHolder .MenuBar .ShareButton .Icon_rtl{ transform: rotate(180deg); } #FormView .InnerHolder .MenuBarHolder .MenuBar .NoPublishButton{ width: calc(100% - 15px) !important; } #FormView .InnerHolder .MenuBarHolder .ButtonsHolder{ position: relative; display: block; margin: 0 auto; margin-top: 1px; padding: 0px; padding-top:10px; top: 0px; left: 0px; width: 100%; height: 30px; border-top:1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .MenuBarHolder .ButtonsHolder .Button{ position: relative; display: inline-block; margin: 0 auto; margin-left: 10px; margin-right: 10px; padding: 0px; padding-left: 5px; padding-right: 5px; top: 0px; left: 0px; width: auto; min-width: 120px; height: 29px; font-family: var(--primary-font--); font-size: 16px; line-height: 29px; text-align: center; vertical-align: top; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); text-overflow: ellipsis; border-bottom: 1px var(--color-lighter-gray--) solid; border-radius: 15px; cursor: pointer; transition: 0.2s; } #FormView .InnerHolder .MenuBarHolder .ButtonsHolder .Button:hover{ background-color:var(--color-light-gray--); color: var(--primary-text-color-dark-gray--); } #FormView .InnerHolder .MenuBarHolder .ButtonsHolder .Selected{ color: var(--color-white--); background-color: var(--primary-brand-color-blue--); } #FormView .InnerHolder .MenuBarHolder .ButtonsHolder .Selected:hover{ color: var(--color-white--) !important; background-color: var(--primary-brand-color-blue--) !important; } #FormView .InnerHolder .PageHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top:5px; top: 0px; left: 0px; width: 100%; height: calc(100% - 108px); overflow-x: hidden; overflow-y: auto !important; } #FormView .InnerHolder .PageHolder.NoButtons{ height: calc(100% - 58px); } #FormView .InnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; margin-bottom: 5px; padding: 0px; padding-top: 20px; padding-bottom: 25px; padding-left: 30px; padding-right: 30px; top: 0px; left: 0px; width: 100%; max-width: 660px; height: auto; min-height: calc(100% - 50px); background-color: var(--color-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); } #FormView .InnerHolder .FormHolder .AnonymousFormHeader{ position: relative; display: block; margin: 0 auto; margin-bottom: 5px; width: calc(100% - 20px); height: auto; min-height: 50px; background-color: var(--primary-brand-color-blue--); border: 2px var(--color-white--) solid; border-radius: 15px; border: 1px var(--color-lighter-gray--) solid; } #FormView .InnerHolder .FormHolder .AnonymousFormHeader .AnonymousIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 60px; height: 60px; background-image: url(/assets/images/icons/anonymous_white.svg); background-position: 0px 5px; background-size: 60px 60px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormView .InnerHolder .FormHolder .AnonymousFormHeader .InfoText{ position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px;; padding: 0px; width: calc(100% - 60px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); vertical-align: middle; } #FormView .InnerHolder .PageHolder .ResponsesDialog{ position: relative; display: block; margin: 0 auto; margin-bottom: 5px; padding: 0px; padding-top: 20px; padding-bottom: 25px; padding-left: 30px; padding-right: 30px; top: 0px; left: 0px; width: 100%; max-width: 660px; height: auto; min-height: calc(100% - 50px); background-color: var(--color-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); } #FormView .InnerHolder .PageHolder .ResponsesDialog .TitleHolder{ position: relative; display: block; width: calc(100% - 30px); height: 40px; margin: 0 auto; padding: 0px; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .TitleHolder .Title{ position: relative; display: inline-block; width: calc(100% - 200px); height: 40px; margin: 0 auto; padding: 0px; font-size: 18px; line-height: 24px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; font-weight: 600; white-space: nowrap; color: var(--primary-text-color-dark-gray--); vertical-align: top; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .TitleHolder .Info{ position: relative; display: inline-block; width: 200px; height: 40px; margin: 0 auto; padding: 0px; font-size: 16px; line-height: 24px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; font-weight: normal; white-space: nowrap; color: var(--primary-text-color-dark-gray--); vertical-align: top; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder{ position: relative; display: block; margin: 10px; padding: 0px; width: calc(100% - 20px); height: auto; min-height: 50px; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList{ position: relative; display: none; margin: 0 auto; padding: 0px; width: 100%; height: auto; border: 1px var(--color-light-gray--) solid; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; border: 1px var(--color-light-gray--) solid; background-color: var(--primary-brand-color-blue--); } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .TitleHolder .Title{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .TitleHolder .Button{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 4px -4px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 50px; transition: 0.2s; cursor: pointer; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .TitleHolder .ArrowDown{ transform: rotate(0deg); } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .TitleHolder .ArrowUp{ transform: rotate(180deg); } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList .CompletedList{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList .UncompletedList{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList .Member{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList .Member .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList .Member .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList .Member .WithStatus{ width: calc(100% - 180px); } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList .Member .UncompletedList:last-child{ border-bottom: none; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList .Member .CompletedList:first-child{ border-top: none; } #FormView .InnerHolder .PageHolder .ResponsesDialog .AssigneesStatusListHolder .AssigneesStatusList .Member .Status{ position: relative; display: inline-block; margin-top: 9px; padding-right: 10px; padding-left: 10px; width: 100px; height: 22px; font-family: var(--primary-font--); font-size: 14px; line-height: 22px; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: var(--color-white--); vertical-align: top; background-color: var(--color-gray--); border-radius: 15px; overflow: hidden; } /** **/ #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar{ position: relative; display: block; margin: 10px; padding: 10px; width: calc(100% - 40px); background-color: var(--color-lighter-gray--); border-bottom: 1px var(--color-lighter-gray--) solid; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .MemberHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 202px); height: 40px; vertical-align: middle; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .MemberHolder .Member{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .MemberHolder .Member .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .MemberHolder .Member .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 200px; height: 40px; vertical-align: middle; direction: ltr; border: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar .Button{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 39px; height: 40px; vertical-align: middle; background-position: 5px 5px; background-repeat: no-repeat; background-size: 30px 30px; overflow: hidden; cursor: pointer; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar .Button:hover{ background-color: var(--color-light-gray--); } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar .Button:active{ background-color: var(--color-light-gray--); } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar .ArrowLeft{ background-image: url('/assets/images/icons/arrow_left_black.svg'); border-right: 1px var(--color-lighter-gray--) solid; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar .ArrowRight{ background-image: url('/assets/images/icons/arrow_right_black.svg'); border-left: 1px var(--color-lighter-gray--) solid; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar .Disabled{ background-image: unset !important; cursor: unset !important; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar .Disabled:hover{ background-color: unset !important; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar .InfoText{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 120px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; overflow: hidden; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesFormHolder{ position: relative; display: block; margin: 10px; padding: 0px; width: calc(100% - 20px); height: auto; min-height: 50px; border-top: 1px var(--color-light-gray--) solid; } #FormView .InnerHolder .PageHolder .ResponsesDialog .NoResponsesMessageHolder{ position: relative; display: block; margin: 0 auto; margin-top: 30px; margin-bottom: 20px; padding: 0px; width: calc(100% - 60px); min-height: 50px; font-size: 16px; line-height: 20px; text-align: center; overflow: hidden; } /***/ #FormView .InnerHolder .PageHolder .ShareDialog{ position: relative; display: block; margin: 0 auto; margin-bottom: 5px; padding: 0px; padding-top: 20px; padding-bottom: 25px; padding-left: 30px; padding-right: 30px; top: 0px; left: 0px; width: 100%; max-width: 660px; height: auto; min-height: calc(100% - 50px); background-color: var(--color-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); } #FormView .InnerHolder .PageHolder .ShareDialog .Title{ position: relative; display: inline-block; width: 100%; height: 40px; margin: 0 auto; padding: 0px; font-size: 18px; line-height: 24px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; font-weight: 600; white-space: nowrap; color: var(--primary-text-color-dark-gray--); vertical-align: top; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .TabBar{ position: relative; display: block; margin: 0 auto; margin-top: 10px; top: 0px; width: calc(100% - 14px); height: 50px; text-align: left; } #FormView .InnerHolder .PageHolder .TabBar .TabBarMenuItem{ position: relative; display: inline-block; margin: 0px; margin-left: 2px; margin-right: 2px; padding: 0px; top: 0px; left: 0px; text-align: center; height: 48px; width: auto; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-top: 1px var(--color-light-gray--) solid; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #ffffff; cursor: pointer; } #FormView .InnerHolder .PageHolder .TabBar .TabBarMenuItem.selected{ background-color: var(--primary-brand-color-blue--); } #FormView .InnerHolder .PageHolder .TabBar .TabBarMenuItem.selected:hover{ background-color: var(--primary-brand-color-blue--); } #FormView .InnerHolder .PageHolder .TabBar .TabBarMenuItem:hover{ background-color: var(--color-light-gray--); } #FormView .InnerHolder .PageHolder .TabBar .TabBarMenuItemIcon{ position: relative; display: inline-block; margin-right: 10px; margin-left: 10px; top: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #FormView .InnerHolder .PageHolder .TabBar .TabBarMenuItemTitle{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: auto; height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: left; vertical-align: middle; color: var(--primary-text-color-gray-); text-overflow: ellipsis; } #FormView .InnerHolder .PageHolder .TabBar .TabBarMenuItem.selected .TabBarMenuItemTitle{ color: #ffffff; } #FormView .InnerHolder .PageHolder .DialogInnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; overflow: hidden; border: 1px var(--color-light-gray--) solid; } #FormView .InnerHolder .PageHolder .ShareDialog .InfoTextHolder{ position: relative; display: block; margin: 0 auto; margin-top: 20px; padding: 10px; padding-bottom: 10px; width: calc(100% - 40px); height: auto; font-size: 18px; line-height: 26px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); overflow: hidden; } #FormView .InnerHolder .PageHolder .ShareDialog .WithBottomPadding{ padding-bottom: 10px; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder{ position: relative; display: block; margin: 0 auto; /*margin-top:20px;*/ padding: 10px; width: calc(100% - 30px); height: auto; min-height: 100px; overflow: hidden; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTableTitle{ position: relative; display: inline-block; width: calc(100% - 100px); height: 20px; margin: 0 auto; margin-bottom: 5px; padding: 10px; font-size: 18px; line-height: 20px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #FormView .InnerHolder .ShareDialog .ShareTableHolder .ShareTableDescription{ position: relative; display: block; margin: 0 auto; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; width: calc(100% - 20px); height: auto; font-size: 16px; line-height: 26px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); overflow: hidden; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .NoAddButton{ width: 100% !important; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .AddButton{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; padding-right: 5px; padding-left: 5px; width: 60px; height: 22px; font-family: var(--primary-font--); font-size: 14px; line-height: 22px; text-align: center; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); border-radius: 15px; overflow: hidden; cursor: pointer; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .AddButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 30px; height: auto; border: 1px var(--color-light-gray--) solid; background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; /*border-radius: 20px;*/ direction: ltr; text-align: left; overflow-x: hidden; overflow-y: auto; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item{ position: relative; display: block; top: 0px; left: 0px; margin:0 auto; padding: 0px; width: 100%; height: 40px; overflow:hidden; border-bottom: 1px var(--color-light-gray--) solid; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item:last-child{ border-bottom: none; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 100px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item .CreatorBadge{ position: relative; display: inline-block; margin-top: 9px; margin-right: 20px; margin-left: 20px; padding-right: 10px; padding-left: 10px; width: auto; height: 22px; font-family: var(--primary-font--); font-size: 14px; line-height: 22px; text-align: start; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; color: var(--color-white--); background-color: var(--color-gray--); border-radius: 15px; overflow: hidden; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item .Title{ position: relative; display: inline-block; margin: 0 auto; margin-right: 15px; margin-left: 15px; padding: 0px; width: calc(100% - 72px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; font-weight: normal; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item .DeleteButton{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 5px 5px; background-repeat: no-repeat; background-image: url('/assets/images/icons/delete_black.svg'); background-size: 20px 20px; border-radius: 15px; cursor: pointer; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item .NoDeleteButton{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item .DeleteButton:active{ background-color: var(--color-heavy-gray--); } #FormView .InnerHolder .ShareDialog .ShareTableHolder .SingleResponderCheckboxHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-bottom: 8px; height: 30px; width: 100%; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; cursor: pointer; } #FormView .InnerHolder .ShareDialog .ShareTableHolder .SingleResponderCheckbox{ position: relative; display: inline-block; margin: 0 auto; margin-left:5px; margin-right:5px; padding: 0px; width: 30px; height: 30px; background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: inherit; } #FormView .InnerHolder .ShareDialog .ShareTableHolder .Unchecked{ background-image: url(/assets/images/icons/checkbox_black.svg); } #FormView .InnerHolder .ShareDialog .ShareTableHolder .Checked{ background-image: url(/assets/images/icons/checkbox_checked_black.svg); } #FormView .InnerHolder .ShareDialog .ShareTableHolder .SingleResponderCheckboxTitle{ position: relative; display: inline-block; width: calc(100% - 40px); height: 30px; margin: 0 auto; padding: 0px; font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; color: var(--primary-text-color-dark-gray--); overflow: hidden; cursor: inherit; } /**/ #FormView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; min-height: 30px; height: auto; width: 100%; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; /*cursor: pointer;*/ } #FormView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder .AnonymousResponsesCheckbox{ position: relative; display: inline-block; margin: 0 auto; margin-left:5px; margin-right:5px; padding: 0px; width: 30px; height: 30px; background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; } #FormView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder .Unchecked{ background-image: url(/assets/images/icons/checkbox_black.svg); } #FormView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder .Checked{ background-image: url(/assets/images/icons/checkbox_checked_black.svg); } #FormView .InnerHolder .ShareDialog .ShareTableHolder .AnonymousResponsesCheckboxHolder .AnonymousResponsesCheckboxTitle{ position: relative; display: inline-block; width: calc(100% - 40px); min-height: 20px; height: auto; margin: 0 auto; margin-top: 4px; margin-bottom: 10px; padding: 0px; font-size: 16px; line-height: 22px; text-align: start; unicode-bidi: plaintext; vertical-align: top; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponsesSummeryTitleHolder{ position: relative; display: block; margin: 0 auto; margin-bottom: 10px; padding: 0px 10px 0px 10px; width: calc(100% - 40px); height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; color: var(--color-white--); border: 1px var(--color-light-gray--) solid; background-color: var(--primary-brand-color-blue--); } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem{ position: relative; display: block; margin: 0 auto; margin-bottom: 10px; padding: 0px; padding-top: 15px; padding-bottom: 10px; width: calc(100% - 20px); height: auto; min-height: 50px; background-color: var(--color-lighter-gray--); } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .ChartTitle{ position: relative; display: block; width: calc(100% - 40px); min-height: 30px; height: auto; margin: 0 auto; margin-bottom: 15px; padding: 0px; font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .PieChart{ padding: 10px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 10px; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .BarChart{ padding: 10px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 10px; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .ChartDataHolder{ position: relative; display: block; width: calc(100% - 40px); min-height: 30px; height: auto; margin: 0 auto; margin-bottom: 10px; padding: 0px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .ChartDataHolder .ChartDataItem{ position: relative; display: block; width: 100%; min-height: 30px; height: auto; margin: 0 auto; padding: 0px; border-bottom: 1px var(--color-light-gray--) solid; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .ChartDataHolder:last-child{ border-bottom: 0px; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .ChartDataHolder .ChartDataItem .ItemColor{ position: relative; display: inline-block; margin: 5px; padding: 0px; width: 30px; height: 30px; vertical-align: middle; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .ChartDataHolder .ChartDataItem .ItemLabel{ position: relative; display: inline-block; width: calc(100% - 140px); min-height: 18px; height: auto; margin: 0 auto; padding: 0px 20px 0px 20px; font-size: 16px; line-height: 18px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .ChartDataHolder .ChartDataItem .ItemValue{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 60px; min-height: 30px; height: auto; font-size: 16px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 20px); min-height: 100px; height: auto; line-height: 20px; } /**/ #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .RatingItem{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; width: 260px; height: auto; min-height: 40px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; /*border-radius: 20px;*/ overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .RatingItem .StarsHolder{ position:relative; display: inline-block; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; top: 0px; left: 0px; width:250px; height: 40px; vertical-align: middle; text-align: center; overflow:visible; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .RatingItem .StarsHolder .Star{ position:relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width:40px; height: 40px; background-repeat: no-repeat; vertical-align: middle; overflow:visible; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .RatingItem .StarsHolder .Unselected{ background-image: url("/assets/images/icons/star_empty_black.svg"); background-position: 0px 0px; background-size: 40px 40px; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .RatingItem .StarsHolder .Selected{ background-image: url("/assets/images/icons/star_full_black.svg"); background-position: 0px 0px; background-size: 40px 40px; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .RatingItem .ProfileHolder{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: 40px; background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .RatingItem .ProfileHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .RatingItem .ProfileHolder .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .RatingItem .Answer{ position: relative; display: block; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; margin-left: 10px; width: calc(100% - 20px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); overflow: hidden; } /**/ #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TextItem{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; width: calc(100% - 40px); height: auto; min-height: 40px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; /*border-radius: 20px;*/ overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TextItem .ProfileHolder{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: 40px; background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TextItem .ProfileHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TextItem .ProfileHolder .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TextItem .Answer{ position: relative; display: block; margin-top: 10px; margin-bottom: 10px; margin-right: 10px; margin-left: 10px; width: calc(100% - 20px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); overflow: hidden; } /**/ #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TimeItem{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; width: 260px; height: auto; min-height: 40px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; /*border-radius: 20px;*/ overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TimeItem .ProfileHolder{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: 40px; background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TimeItem .ProfileHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TimeItem .ProfileHolder .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .TimeItem .Time{ position: relative; display: block; margin-right: 5px; margin-left: 5px; width: calc(100% - 10px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /**/ #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .FileItem{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; width: calc(100% - 40px); height: auto; min-height: 40px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; /*border-radius: 20px;*/ overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .FileItem .File{ position: relative; display: block; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; width: 100%; height: auto; min-height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .FileItem .File .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 30px; background-image: url(/assets/images/icons/file_black.svg); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; text-align: center; vertical-align: middle; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .FileItem .File .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 70px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .FileItem .ProfileHolder{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: 40px; background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .FileItem .ProfileHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .FileItem .ProfileHolder .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /**/ #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .ImageItem{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; width: 260px; height: auto; min-height: 190px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; /*border-radius: 20px;*/ overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .ImageItem .Image{ position: relative; display: block; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; width: 260px; height: 180px; background-size: contain; background-repeat: no-repeat; background-position: center; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .ImageItem .ProfileHolder{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: 40px; background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .ImageItem .ProfileHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .ImageItem .ProfileHolder .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /**/ #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .SignatureItem{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; width: 260px; min-height: 140px; height: auto; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; /*border-radius: 20px;*/ overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .SignatureItem .Signature{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 260px; height: 130px; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .SignatureItem .ProfileHolder{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: 40px; background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .SignatureItem .ProfileHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 30px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #FormView .InnerHolder .PageHolder .DialogInnerHolder .ResponseItem .SummeryItemsHolder .SignatureItem .ProfileHolder .Name{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } /* @media print { body.is-printing * { visibility: hidden; box-shadow: none !important; } body.is-printing #desktop_navigaion_menu{ display: none; } body.is-printing #title_bar{ display: none !important; } body.is-printing .Titlebar{ display: none !important; } body.is-printing #content_container{ text-align: center !important; height: 100% !important; } body.is-printing .FormView .Titlebar, body.is-printing .FormHolder *, body.is-printing .FormNameHolder, body.is-printing .FormNameHolder .FormName { visibility: visible; height: auto !important; overflow-y: auto !important; } body.is-printing #FormView { position: absolute; top: 0; left: 0; width: 100%; background: white !important; } body.is-printing #FormView, body.is-printing .InnerHolder, body.is-printing .PageHolder{ height: 100% !important; width: 100% !important; text-align: center !important; background-color: var(--color-scheme-white--) !important; } body.is-printing .FormHolder { position: relative !important; display: block !important; margin: 0 auto !important; padding: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; box-shadow: none !important; border: none !important; width: 100% !important; height: auto !important; } body.is-printing .TitleMenuButton, body.is-printing .MenuBarHolder, body.is-printing .AddButton, body.is-printing .DeleteButton { display: none !important; } } */ @container FormView (max-width: 730px){ #FormView .InnerHolder .FormHolder{ padding-left: 5px; padding-right: 5px; max-width: unset; width: calc(100% - 10px); } #FormView .InnerHolder .PageHolder .ResponsesDialog .TitleHolder { position: relative; display: block; width: calc(100% - 30px); height: 40px; margin: 0 auto; padding: 0px; } #FormView .InnerHolder .PageHolder .ResponsesDialog{ margin: 0 auto; margin-bottom: 5px; padding: 0px; padding-top: 20px; /*padding-bottom: 25px;*/ padding-left: 2px; padding-right: 5px; max-width: unset; width: calc(100% - 7px); height: auto; min-height: calc(100% - 50px); } #FormView .InnerHolder .PageHolder .ShareDialog .Title { width: calc(100% - 30px) } #FormView .InnerHolder .PageHolder .DialogInnerHolder{ border-left: 0px; border-right: 0px; border-bottom: 0px; } #FormView .InnerHolder .PageHolder .ShareDialog { padding-left: 2px; padding-right: 5px; width: calc(100% - 10px); max-width: unset; } } @media only screen and (hover: hover) and (min-width: 781px){ #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .AddButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } #FormView .InnerHolder .PageHolder .ShareDialog .ShareTableHolder .ShareTable .Item .DeleteButton:hover{ background-color: var(--color-light-gray--); } } @media only screen and (max-width: 780px) { #FormView .InnerHolder .FormHolder{ padding-left: 5px; padding-right: 5px; max-width: unset; width: calc(100% - 10px); } #FormView .Titlebar .Title{ width: calc(100% - 86px) !important; } #FormView .InnerHolder .MenuBarHolder .ButtonsHolder .Button{ min-width: 92px; margin-left: 5px; margin-right: 5px; } #FormView .InnerHolder .PageHolder .ResponsesDialog { padding-left: 0px; padding-right: 0px; width: 100%; max-width: unset; } #FormView .InnerHolder .PageHolder .ShareDialog{ padding-left: 0px; padding-right: 0px; width: 100%; max-width: unset; } #FormView .InnerHolder .PageHolder .DialogInnerHolder{ border-left: 0px; border-right: 0px; border-bottom: 0px; } #FormView .InnerHolder .PageHolder .ShareDialog .Title { width: calc(100% - 30px) } #FormView .InnerHolder .FormNameHolder { width: calc(100% - 55px); } #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton{ width: auto; padding-left: 0px; padding-right: 0px; } #FormView .InnerHolder .MenuBarHolder .MenuBar .PublishButton .Title{ display: none; } } @media only screen and (max-width: 500px) { #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .MemberHolder .Member .Name{ width: auto; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .MemberHolder{ width: 100%; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar .InfoText { width: 200px; } #FormView .InnerHolder .PageHolder .ResponsesDialog .ResponsesMenuBar .NavigationBar{ display: block; margin-top: 7px; width: 280px; } } /* filename: ../app/css/views/EmailView.css */ #EmailView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: left; background-color: var(--view-background-color--); overflow: hidden; container-name: EmailView; container-type: inline-size; } #EmailView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #EmailView .Titlebar .TitleBarBackButton{ position: relative; display: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 40px; height: 50px; background-image: url(assets/images/icons/arrow_back_white.svg); background-size: 30px 30px; background-repeat: no-repeat; background-position: 5px 10px; vertical-align: middle; cursor: pointer; overflow: hidden; } #EmailView .Titlebar .TitleBarBackButton.TitleBarBackButton_rtl { background-image: url(assets/images/icons/arrow_forward_white.svg) !important; } #EmailView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #EmailView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 176px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #EmailView .Titlebar .TitleReplyButton{ position: relative; display: inline-block; margin: 0px; margin-right: 5px; padding: 0px; top: 0px; right: 6px; height: 40px; width: 40px; vertical-align: middle; background-image: url(/assets/images/icons/reply_white.svg); background-repeat: no-repeat; background-position: 7px 7px; background-size: 26px 26px; background-color: var(--color-scheme-blue-l1--); border-radius: 5px; transition: 0.1s linear; cursor: pointer; } #EmailView .Titlebar .TitleReplyButton_rtl{ margin-left: 5px; margin-right: unset; } #EmailView .Titlebar .TitleForwardButton{ position: relative; display: inline-block; margin: 0px; margin-left: 5px; padding: 0px; top: 0px; right: 6px; height: 40px; width: 40px; vertical-align: middle; background-image: url('/assets/images/icons/forward_arrows_white.svg'); background-repeat: no-repeat; background-position: 7px 7px; background-size: 26px 26px; background-color: var(--color-scheme-blue-l1--); border-radius: 5px; transition: 0.1s linear; cursor: pointer; } #EmailView .Titlebar .TitleForwardButton_rtl{ margin-left: unset; margin-right: 5px; } #EmailView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #EmailView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #EmailView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #EmailView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #EmailView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #EmailView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #EmailView .InnerHolder .EmailHolder{ position: relative; display: block; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; padding-left: 20px; padding-right: 20px; width: 740px; height: auto; min-height: calc(100% - 10px); background-color: var(--color-scheme-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); overflow:hidden } #EmailView .InnerHolder .EmailHolder .EmailHeader{ position: relative; display: block; margin: 0 auto; margin-bottom: 10px; padding: 0px; padding-bottom: 10px; width: 100%; min-height: 90px; height: auto; border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #EmailView .InnerHolder .EmailHolder .EmailHeader .EmailSubject{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top:10px; top: 0px; left: 0px; width: 100%; min-height: 30px; height: auto; font-family: var(--primary-font--); font-size: 18px; font-weight: bold; line-height: 22px; text-align: inherit; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #EmailView .InnerHolder .EmailHolder .EmailHeader .EmailSender{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; direction: ltr; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #EmailView .InnerHolder .EmailHolder .EmailHeader .EmailRecipient{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 12px; line-height: 20px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } #EmailView .InnerHolder .EmailHolder .EmailHeader .EmailRecipient:nth-last-child(2){ white-space: nowrap; width: calc(100% - 150px); } #EmailView .InnerHolder .EmailHolder .EmailHeader .EmailRecievedAt{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 150px; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: right; vertical-align: top; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #EmailView .InnerHolder .EmailHolder .EmailHeader .EmailRecievedAt.EmailRecievedAt_rtl{ text-align: left; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox { position: relative; display: flex; align-items: center; margin: 10px 0; padding: 15px; background-color: var(--color-scheme-gray-l0--); border: 1px solid var(--color-scheme-gray-l1--); border-radius: 8px; gap: 15px; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox.rtl { direction: rtl; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox { position: relative; display: block; margin: 10px 0; padding: 15px; width: calc(100% - 32px); /* Accounts for padding/border */ min-height: 60px; height: auto; background-color: var(--color-scheme-gray-l0--); border: 1px solid var(--color-scheme-gray-l1--); border-radius: 8px; overflow: hidden; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalIcon { position: relative; display: inline-block; margin: 0 auto; margin-top: 15px; padding: 0px; width: 40px; height: 40px; vertical-align: top; background-size: contain; background-repeat: no-repeat; background-position: center; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalDetails { position: relative; display: inline-block; margin-left: 15px; width: calc(100% - 65px); /* Subtract icon width + margin */ height: auto; vertical-align: top; text-align: start; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox.rtl .CalDetails { margin-left: 0px; margin-right: 15px; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalMethod { position: relative; display: block; font-family: var(--primary-font--); font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--primary-text-color-dark-gray--); opacity: 0.7; font-weight: bold; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalSummary { position: relative; display: block; margin-top: 2px; font-family: var(--primary-font--); font-size: 18px; font-weight: bold; line-height: 22px; color: var(--primary-text-color-dark-gray--); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalMeta { position: relative; display: block; margin-top: 5px; font-family: var(--primary-font--); font-size: 13px; line-height: 18px; color: var(--primary-text-color-dark-gray--); } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalMeta span { position: relative; display: inline-block; margin-right: 15px; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox.rtl .CalMeta span { margin-right: 0px; margin-left: 15px; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalRecurrence{ font-size: 13px; line-height: 16px; height: 16px; margin-top: 6px; color: #5f6368; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalActions { position: relative; display: block; margin-top: 15px; width: 100%; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalBtn { position: relative; display: inline-block; margin: 5px; width: calc(33% - 12px); height: 32px; line-height: 32px; font-family: var(--primary-font--); font-size: 13px; font-weight: bold; text-align: center; border-radius: 4px; border: 1px solid var(--color-scheme-gray-l2--); background-color: var(--color-white--); color: var(--primary-text-color-dark-gray--); cursor: pointer; transition: 0.1s linear; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox.rtl .CalBtn { margin-right: 0px; margin-left: 10px; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalBtn.ActiveAccept { background-color: var(--calendar-invite-status-accepted-background--) !important; color: var(--calendar-invite-status-accepted-text--) !important; border-color: var(--calendar-invite-status-accepted-text--) !important; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalBtn.ActiveMaybe { background-color: var(--calendar-invite-status-tentative-background--) !important; color: var(--calendar-invite-status-tentative-text--) !important; border-color: var(--calendar-invite-status-tentative-text--) !important; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalBtn.ActiveDecline { background-color: var(--calendar-invite-status-declined-background--) !important; color: var(--calendar-invite-status-declined-text--) !important; border-color: var(--calendar-invite-status-declined-text--) !important; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalBtn[class*="Active"] { font-weight: 900; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalBtn:active { opacity: 0.8; } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalStatusNote{ line-height: 16px; font-size: 12px; margin-top: 5px; } #EmailView .InnerHolder .EmailHolder .EmailBody{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: calc(100% - 91px); height: auto; background-color: var(--color-scheme-gray-l0--); overflow: hidden; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; padding-bottom: 10px; width: 100%; height: auto; min-height: 80px; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentsFooterTitle{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 22px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; background-color: var(--color-scheme-gray-l0--); border: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 110px; height: auto; vertical-align: top; transition: 0.2s linear; cursor: pointer; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .Image{ position: relative; display: block; margin: 0 auto; margin-top: 2px; margin-bottom: 2px; padding: 0px; width: 60px; height: 50px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; background-color: var(--color-scheme-black--); overflow: hidden; transition: 0.2s linear; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); cursor: pointer; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 50px; height: 55px; background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); overflow: hidden; transition: 0.2s linear; cursor: pointer; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.PDF{ margin-top: 2px; margin-bottom: 2px; width: 50px; height: 50px; background-image: url('/assets/images/icons/file_pdf_color.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.WORD{ background-image: url('/assets/images/icons/word-document.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.EXCEL{ background-image: url('/assets/images/icons/excel-document.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.POWERPOINT{ background-image: url('/assets/images/icons/ppt-document.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.ZIP{ background-image: url('/assets/images/icons/zip-document.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.CSV{ background-image: url('/assets/images/icons/csv-document.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.TXT{ background-image: url('/assets/images/icons/txt-document.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.AUDIO{ background-image: url('/assets/images/icons/audio-document.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.VIDEO{ background-image: url('/assets/images/icons/video-document.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .File.OTHER{ background-image: url('/assets/images/icons/other-document.svg'); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .Footer{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; margin: 5px; padding: 0px; width: calc(100% - 10px); line-height: 20px; max-height: 40px; min-height: 20px; font-family: var(--primary-font--); font-size: 14px; text-align: center; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .Menu{ position: relative; display: none; margin: 0 auto; padding: 0px; top: 0px; left: -5px; width: 120px; min-height: 40px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ cursor: pointer; z-index: 1000; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .Menu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 40px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .Menu .MenuItem .Icon{ position: relative; display: inline-block; margin: 5px; top: 0px; left: 0px; width: 20px; height: 30px; vertical-align: middle; background-size:20px 20px; background-repeat: no-repeat; background-position: 0px 5px; } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .Menu .MenuItem .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 40px); height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @container EmailView (width <= 780px){ #EmailView .Titlebar .TitleBarBackButton{ display: inline-block; } #EmailView .Titlebar .Title{ width: calc(100% - 216px); } #EmailView .InnerHolder .EmailHolder{ width: calc(100% - 20px); padding-left: 10px; padding-right: 10px; } } @media only screen and (hover: hover) and (min-width: 781px){ #EmailView .Titlebar .TitleReplyButton:hover{ background-color: rgba(200, 200, 200, 0.2); } #EmailView .Titlebar .TitleForwardButton:hover{ background-color: rgba(200, 200, 200, 0.2); } #EmailView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #EmailView .InnerHolder .EmailHolder .AttachmentsFooter .AttachmentItem .Menu .MenuItem:hover{ background-color: var(--color-scheme-gray-l1--); } #EmailView .InnerHolder .EmailHolder .CalendarInviteBox .CalBtn:hover { background-color: var(--color-scheme-gray-l1--); } } /* filename: ../app/css/views/ShifteditorView.css */ #ShifteditorView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); } #ShifteditorView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #ShifteditorView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #ShifteditorView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #ShifteditorView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #ShifteditorView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #ShifteditorView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #ShifteditorView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #ShifteditorView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #ShifteditorView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #ShifteditorView > .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #ShifteditorView .InnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; max-width: 640px; height: auto; min-height: 100%; text-align: left; background-color: var(--color-scheme-white--); } #ShifteditorView .InnerHolder .FormHolder .Form{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 2px); height: 100%; border-left: 1px var(--color-scheme-gray-l1--) solid; border-right: 1px var(--color-scheme-gray-l1--) solid; } #ShifteditorView .InnerHolder .FormHolder .FormBody{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; background-color: var(--color-scheme-white--); } #ShifteditorView .InnerHolder .FormHolder .FormBody .MessageHolder{ position: relative; display: block; margin: 0 auto; margin-bottom: 1px; padding: 0px; width: 100%; height: 50px; text-align: left; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .MessageHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: middle; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .MessageHolder .Text{ position: relative; display: inline-block; width: calc(100% - 100px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-white--); vertical-align: middle; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder{ position: relative; display: block; margin: 0 auto; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; width: calc(100% - 20px); max-width: 600px; height: 100%; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .ProfileHolder{ position: relative; display: inline-block; width: 100%; height: 160px; vertical-align: middle; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .ProfileHolder .ProfileTopbar{ position: absolute; display: block; left: -19px; width: calc(100% + 38px); height: 60px; background-color: var(--color-scheme-gray-l1--); border-bottom: 2px var(--color-scheme-gray-l2--) solid; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .ProfileHolder .ProfileTopbar .Date{ position: absolute; display: block; margin: 0 auto; padding: 10px; top: 0px; left: 0px; height: 40px; width: calc(100% - 30px); font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: right; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .ProfileHolder .ProfilePicture{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; top: 0px; left: 0px; height: 100px; width: 100px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border: 2px var(--color-scheme-white--) solid; border-radius: 52px; filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2)); } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .ProfileHolder .ProfileName{ position: relative; display: block; margin: 0 auto; padding-left: 10px; padding-right: 10px; width: calc(100% - 64px); height: 40px; font-family: var(--primary-font--); font-size: 18px; font-weight: bold; line-height: 40px; text-align: center; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .InputTitle{ position: relative; display: block; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .InputTitleBorderBottom{ border-bottom: 1px var(--color-scheme-gray-l2--) solid; margin-top: 20px; margin-bottom: 10px; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .EmployeePositionButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; text-align: inherit; width: 100%; height: 40px; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .EmployeePositionButton .ButtonTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; color: var(--color-dark-gray--); border: 1px var(--color-light-gray--) solid; background-color: var(--color-lighter-gray--); border-radius: 10px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .EmployeePositionButton .ButtonTitle:hover{ background-color: var(--color-lighter-gray--); } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .EmployeePositionButton .EmployeePositionsMenu{ position: absolute; display: none; margin: 0 auto; margin-top: 4px; padding: 0px; width: auto; max-width: 240px; height: auto; min-height: 40px; background-color: var(--color-scheme-white--); border: 1px var(--color-light-gray--) solid; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); cursor: pointer; z-index: 1000; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .EmployeePositionButton .EmployeePositionsMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: auto; min-width: 120px; max-width: 240px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px var(--color-lighter-gray--) solid; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .EmployeePositionButton .EmployeePositionsMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .VerticalSpace{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .DateHolder{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 20px; padding: 0px; width: 260px; height: auto; vertical-align: middle; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .DateSpace{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 80px; height: auto; vertical-align: middle; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .DateHolder .DatePickerHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 120px; height: 40px; text-align: center; vertical-align: middle; overflow:visible; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .DateHolder .TimePickerHolder{ position:relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width:140px; height: 40px; text-align: center; vertical-align: middle; overflow:visible; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .DateHolder .LocationHolder{ position:relative; display: inline-block; margin: 0 auto; margin-top:20px; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: 230px; height: 60px; border: 1px var(--color-light-gray--) solid; background-color: var(--color-lighter-gray--); border-radius: 10px; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .MiniTitle{ position: relative; display: block; margin: 0 auto; margin-top: 3px; padding: 0px; width: 100%; height: 22px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .DateHolder .LocationHolder .LocationIcon{ position:relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 20px; height: 20px; background-image: url('/assets/images/icons/location_on_black.svg'); background-repeat: no-repeat; background-position: 2px 2px; background-size: 16px 16px; vertical-align: middle; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .DateHolder .LocationHolder .LocationText{ position:relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 30px); height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; text-overflow: ellipsis; white-space: nowrap; color: var(--color-dark-gray--); vertical-align: middle; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .InnerTitle{ position: relative; display: inline-block; width: calc(100% - 100px); height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .AddButtonHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 100px; height: 40px; text-align: right; vertical-align: middle; vertical-align: middle; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .AddButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 15px; padding-right: 15px; width: auto; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; font-weight: bold; text-align: center; color: var(--primary-text-color-white--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background-color: var(--color-scheme-blue-l2--); vertical-align: middle; border-radius: 10px; transition: 0.2s linear; overflow: hidden; cursor: pointer; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .AddButton:active{ background-color: var(--color-scheme-blue-l1--); } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .BreaksHolder{ position:relative; display: inline-block; margin: 0 auto; margin-bottom: 10px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 2px); min-height: 40px; height: auto; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .BreaksHolder .BreakItem{ position: relative; display: block; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 10px; width: calc(100% - 20px); height: auto; border: 1px var(--color-scheme-gray-l1--) solid; background-color: var(--color-scheme-gray-l0--); border-radius: 10px; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .NoTableItemsAvaiableItem{ position: relative; display: block; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .BreaksHolder .BreakItem .DateHolder{ width: 260px; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .BreaksHolder .BreakItem .BreakItemInnerHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 32px); height: auto; vertical-align: middle; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .BreaksHolder .BreakItem .BreakItemDeleteButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 30px; background-color: var(--color-lighter-gray--); background-size: 24px 24px; background-repeat: no-repeat; background-position: 3px 3px; background-image: url(/assets/images/icons/close_document_black.svg); vertical-align: middle; border: 1px var(--color-light-gray--) solid; border-radius: 20px; transition: 0.2s linear; cursor: pointer; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .BreaksHolder .BreakItem .BreakItemDeleteButton:active{ background-color: var(--color-scheme-gray-l2--); } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .IssuesHolder{ position:relative; display: inline-block; margin: 0 auto; margin-bottom: 10px; padding: 10px; top: 0px; left: 0px; width: calc(100% - 20px); min-height: 40px; height: auto; list-style: none; background-color: var(--color-scheme-gray-l1--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .IssuesHolder .IssueItem{ position: relative; display: block; margin: 0 auto; padding: 10px 0px 10px 0px; width: 100%; height: auto; min-height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); list-style-type: disc; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .IssuesCounterHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 100px; height: 40px; text-align: right; vertical-align: middle; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .IssuesCounter{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 15px; padding-right: 15px; width: auto; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; font-weight: bold; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; border-radius: 10px; border: 1px var(--color-scheme-gray-l2--) solid; transition: 0.2s linear; overflow: hidden; } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .TextAreaCounterHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 100px; height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: right; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; overflow: hidden; } #ShifteditorView .InnerHolder textarea{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 20px; padding: 10px; width: 100%; height: 140px; box-sizing: border-box; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-gray-l1--); border: none; border-radius: 10px; border: 1px var(--color-scheme-gray-l2--) solid; resize: none; } #ShifteditorView .InnerHolder textarea:focus { background-color: var(--color-scheme-gray-l1--); border-bottom: 1px solid var(--color-scheme-blue-l2--); outline: none; } #ShifteditorView .InnerHolder .ApprovalInfoHolder{ position: relative; display: block; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; padding: 6px; height: auto; width: calc(100% - 20px); text-align: left; background-color: var(--color-scheme-gray-l1--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; overflow: hidden; } #ShifteditorView .InnerHolder .ApprovalInfoHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px var(--color-scheme-white--) solid; } #ShifteditorView .InnerHolder .ApprovalInfoHolder .ManagerName{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; width: calc(100% - 54px); height: 44px; vertical-align: middle; font-family: var(--primary-font--); font-size: 18px; line-height: 44px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; border-radius: 10px; overflow: hidden; cursor: pointer; } #ShifteditorView .InnerHolder .InputText{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; padding: 0px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 16px; font-weight: bold; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; overflow: hidden; } #ShifteditorView .InnerHolder .ApproverButtonsHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; text-align: center; overflow: hidden; } #ShifteditorView .InnerHolder .ApproverButtonsHolder .Button{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 20px; padding: 0px; width: 150px; height: 46px; font-family: var(--primary-font--); font-size: 18px; line-height: 46px; text-align: center; color: #ffffff; text-overflow: ellipsis; border-radius: 26px; cursor: pointer; } #ShifteditorView .InnerHolder .ApproverButtonsHolder .ApproveButton{ background-color: var(--color-button-green--); margin-left: 10px; margin-right: 10px; width: 150px; display: inline-block; vertical-align: middle; transition: 0.2s linear; } #ShifteditorView .InnerHolder .ApproverButtonsHolder .ApproveIcon{ background-image: url(/assets/images/icons/check_white.svg) !important; } #ShifteditorView .InnerHolder .ApproverButtonsHolder .RejectButton{ background-color: var(--color-button-red--); margin-left: 10px; margin-right: 10px; width: 142px; display: inline-block; vertical-align: middle; transition: 0.2s linear; } #ShifteditorView .InnerHolder .ApproverButtonsHolder .RejectIcon{ background-image: url(/assets/images/icons/close_white.svg) !important; } #ShifteditorView .InnerHolder .ApproverButtonsHolder .Button .Title { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 90px; height: 46px; font-size: 18px; line-height: 46px; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: var(--color-white--); vertical-align: top; overflow: hidden; } #ShifteditorView .InnerHolder .ApproverButtonsHolder .Button .Icon { position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 46px; width: 40px; background-image: url(/assets/images/icons/submit_white.svg); background-position: 10px 10px; background-size: 25px 25px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: pointer; } #ShifteditorView .InnerHolder .ApproverButtonsHolder .ApproveButton:active{ background-color: var(--color-button-dark-green--); } #ShifteditorView .InnerHolder .ApproverButtonsHolder .RejectButton:active{ background-color: var(--color-button-red--); } @media only screen and (hover: hover) and (min-width: 781px){ #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .AddButton:hover{ background-color: var(--color-scheme-blue-l1--); } #ShifteditorView .InnerHolder .FormHolder .FormBody .FormBodyInnerHolder .BreaksHolder .BreakItem .BreakItemDeleteButton:hover{ background-color: var(--color-scheme-gray-l2--); } #ShifteditorView .InnerHolder .ApproverButtonsHolder .ApproveButton:hover{ background-color: var(--color-button-dark-green--); } #ShifteditorView .InnerHolder .ApproverButtonsHolder .RejectButton:hover{ background-color: var(--color-button-dark-red--); } #ShifteditorView .InnerHolder .ApprovalInfoHolder .ManagerName:hover{ color: var(--primary-text-color-brand-blue--); } } @media only screen and (max-width: 780px) { } /* filename: ../app/css/views/DirectoryView.css */ #DirectoryView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; background-color: var(--view-background-color--); } #DirectoryView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #DirectoryView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #DirectoryView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #DirectoryView .Titlebar .TitleBarMobileBackButton{ position: relative; display: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 40px; height: 50px; vertical-align: middle; background-image:url('assets/images/icons/arrow_back_white.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 5px 10px; cursor: pointer; overflow: hidden; } #DirectoryView .TitleBarMobileBackButton_rtl{ background-image:url('assets/images/icons/arrow_forward_white.svg') !important; } #DirectoryView .AddressBookHolder{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #DirectoryView .AddressBookHolder .ContactDetails{ position: relative; display: inline-block; top: 0px; left: 0px; width: calc(100% - 301px); height: 100%; vertical-align: top; background: var(--directory-view-contact-details-background-color--); } #DirectoryView .AddressBookHolder .ContactDetails .PlaceholderText { position: absolute; display: block; margin: 0 auto; padding: 0px; top: calc(50% - 25px); width: 100%; height: 50px; font-family: var(--primary-font--); text-align: center; font-size: 16px; line-height: 50px; color: var(--primary-text-color-gray--); line-break: auto; overflow: hidden; } #DirectoryView .AddressBookHolder .ContactDetails .ContactSheet{ position: relative; display: none; margin: 0 auto; top: calc(50% - 220px); width: 480px; height: 440px; background-color: var(--directory-view-contact-sheet-background-color--); filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ overflow: hidden; transition: 0.2s; text-align: left; direction: ltr; } #DirectoryView .AddressBookHolder .ContactDetails .ContactSheet.NoChatFeatures{ top: calc(50% - 170px); height: 360px } #DirectoryView .AddressBookHolder .ContactDetails .ContactSheet .HeaderHolder{ position: absolute; display: block; width: 100%; height: 100px; overflow: hidden; } #DirectoryView .AddressBookHolder .ContactDetails .ContactSheet .Header{ margin: 3%; > h2 { padding: 1rem; margin: 0 0 0.5rem 0; } > p { padding: 0 1rem; } } #DirectoryView .AddressBookHolder .ContactDetails .ContactSheet .Stripes{ height: 20px; color: white; background: repeating-linear-gradient( 30deg, var(--color-light-gray--), var(--color-light-gray--) 10px, var(--color-lighter-gray--) 10px, var(--color-lighter-gray--) 20px ); border-bottom: 5px var(--primary-brand-color-blue--) solid; } #DirectoryView .AddressBookHolder .ContactDetails .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 30px; margin-left: 30px; margin-right: 30px; padding: 0px; height: 100px; width: 100px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; border-radius: 5px; border: 5px #ffffff solid; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } #DirectoryView .AddressBookHolder .ContactDetails .TopInfoHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 30px; padding: 0px; padding-top:50px; height: 50px; width: calc(100% - 170px); vertical-align: middle; } #DirectoryView .AddressBookHolder .ContactDetails .Name{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 22px; line-height: 22px; color: var(--primary-brand-color-blue--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #DirectoryView .AddressBookHolder .ContactDetails .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; color: var(--primary-brand-color-blue--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #DirectoryView .AddressBookHolder .ContactDetails .LocationsHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; padding: 0px; width: 100%; min-height: 0px; height: auto; overflow: hidden; } #DirectoryView .AddressBookHolder .ContactDetails .LocationsHolder .LocationIcon{ position: relative; display: inline-block; padding: 5px; margin: 0 auto; margin-left: 30px; margin-right: 30px; width: 22px; height: 22px; background-image:url('assets/images/icons/domain_black.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #DirectoryView .AddressBookHolder .ContactDetails .LocationsHolder .Location{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 110px); height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #DirectoryView .AddressBookHolder .ContactDetails .PhoneIcon{ position: relative; display: inline-block; padding: 5px; margin: 0 auto; margin-left: 30px; margin-right: 30px; width: 22px; height: 22px; background-image:url('assets/images/icons/phone_black.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 7px; } #DirectoryView .AddressBookHolder .ContactDetails .PhoneNumber{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 110px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; } #DirectoryView .AddressBookHolder .ContactDetails .EmailIcon{ position: relative; display: inline-block; padding: 5px; margin: 0 auto; margin-left: 30px; margin-right: 30px; width: 22px; height: 22px; background-image:url('assets/images/icons/email_black.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 7px; } #DirectoryView .AddressBookHolder .ContactDetails .Email{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 110px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; } #DirectoryView .AddressBookHolder .ContactDetails .ChatIcon{ position: relative; display: inline-block; padding: 5px; margin: 0 auto; margin-left: 30px; margin-right: 30px; width: 22px; height: 22px; background-image:url('assets/images/icons/active_chat_black.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 7px; } #DirectoryView .AddressBookHolder .ContactDetails .Chat{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 110px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; } /**/ #DirectoryView .AddressBookHolder .ContactDetails .VoipIcon{ position: relative; display: inline-block; padding: 5px; margin: 0 auto; margin-left: 30px; margin-right: 30px; width: 22px; height: 22px; background-image:url('assets/images/icons/call_black.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 7px; } #DirectoryView .AddressBookHolder .ContactDetails .VoipText{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 110px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; } #DirectoryView .AddressBookHolder .ContactDetails .VideoIcon{ position: relative; display: inline-block; padding: 5px; margin: 0 auto; margin-left: 30px; margin-right: 30px; width: 22px; height: 22px; background-image:url('assets/images/icons/call_video_chat_black.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 7px; } #DirectoryView .AddressBookHolder .ContactDetails .VideoText{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 110px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; } /**/ #DirectoryView .AddressBookHolder .ContactDetails .Watermark{ position: absolute; display: block; padding-left: 20px; padding-right: 20px; bottom: 10px; width: calc(100% - 40px); height: 30px; font-family: var(--primary-brand-font--); font-size: 18px; line-height: 30px; text-align: right; color: var(--primary-brand-color-blue--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #DirectoryView .AddressBookHolder .AddressBook{ position: relative; display: inline-block; top: 0px; left: 0px; width: 300px; height: 100%; vertical-align: top; background-color: var(--directory-view-contact-address-book-background-color--); border-right: 1px var(--color-border-gray--) solid; overflow: hidden; } #DirectoryView .AddressBookHolder .AddressBook_rtl{ border-right: unset !important; border-left: 1px var(--color-border-gray--) solid; } #DirectoryView .AddressBookHolder .AddressBook .SearchBar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; } #DirectoryView .AddressBookHolder .AddressBook .SearchBar .SearchField input[type=text]{ position: absolute; display: block; padding-left: 40px; padding-right: 40px; top: 5px; left: 10px; width: calc(100% - 20px); height: 40px; box-sizing: border-box; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; } #DirectoryView .AddressBookHolder .AddressBook .SearchBar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #DirectoryView .AddressBookHolder .AddressBook .SearchBar .SearchField .SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 10px; left: 16px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #DirectoryView .AddressBookHolder .AddressBook .SearchBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 12px; right: 16px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #DirectoryView .AddressBookHolder .AddressBook .SearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #DirectoryView .AddressBookHolder .AddressBook .ContactList{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; text-align: left; direction: ltr; width: 100%; height: calc(100% - 50px); overflow-x: hidden; overflow-y: auto; } #DirectoryView .AddressBookHolder .AddressBook .ContactList_rtl{ text-align: right !important; direction:rtl !important; } #DirectoryView .AddressBook .Entry{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: 64px; overflow:hidden; border-bottom: 1px var(--color-light-gray--) solid; transition: 0.2s linear; cursor: pointer; } #DirectoryView .AddressBook .EntrySelected{ background-color: var(--color-light-blue--) !important; } #DirectoryView .AddressBook .Entry .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-left: 8px; margin-right: 8px; padding: 0px; top: 0px; height: 48px; width: 48px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 26px; border: 2px #ffffff solid; } #DirectoryView .AddressBook .Entry .EntryInfoHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 80px); height: 100%; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; direction: inherit; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #DirectoryView .AddressBook .Entry .EntryInfoHolder .Name{ position: relative; display: block; margin-top: 7px; margin-right: 5px; margin-left: 5px; width: calc(100% - 10px); height: 50%; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; direction: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #DirectoryView .AddressBook .Entry .EntryInfoHolder .Title{ position: relative; display: block; margin-right: 5px; margin-left: 5px; width: calc(100% - 10px); height: 50%; font-family: var(--primary-font--); font-size: 14px; line-height: 100%; text-align: inherit; direction: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #DirectoryView .AddressBook .Entry .NoResultsTextHolder{ position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; width: calc(100% - 10px); height: 64px; font-family: var(--primary-font--); font-size: 16px; line-height: 64px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media only screen and (max-width: 700px) { #DirectoryView .AddressBookHolder .AddressBook{ width: 100%; border-right: 0px; } #DirectoryView .AddressBookHolder .ContactDetails .ContactSheet{ position: relaive; display: none; margin-bottom: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); min-height: 400px; overflow-x: hidden; overflow-y: auto; } #DirectoryView .AddressBookHolder .ContactDetails .ContactSheet.NoChatFeatures{ top: 5px; height: calc(100% - 10px); } #DirectoryView .AddressBookHolder .ContactDetails{ display: none; width: 100%; overflow-x: hidden; overflow-y: auto; } #DirectoryView .AddressBookHolder .ContactDetails .TopInfoHolder{ display: block; margin: 0px; margin-left: 35px; padding-top: 20px; width: calc(100% - 70px); } } @media only screen and (min-width: 701px) and (max-width: 1000px){ #DirectoryView .AddressBookHolder .ContactDetails .ContactSheet{ position: relative; display: none; margin-bottom: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); min-height: 400px; overflow-x: hidden; overflow-y: auto; } #DirectoryView .AddressBookHolder .ContactDetails .ContactSheet.NoChatFeatures{ top: 5px; height: calc(100% - 10px); } #DirectoryView .AddressBookHolder .ContactDetails{ overflow-x: hidden; overflow-y: auto; } #DirectoryView .AddressBookHolder .ContactDetails .TopInfoHolder{ display: block; margin: 0px; margin-left: 35px; padding-top: 20px; width: calc(100% - 70px); } } @media only screen and (min-width: 1001px){ } @media only screen and (hover: hover) and (min-width: 781px){ #DirectoryView .AddressBook .Entry:hover{ background-color: var(--color-lighter-gray--) !important; } #DirectoryView .AddressBookHolder .ContactDetails .PhoneNumber:hover{ color: var(--primary-brand-color-blue--); } #DirectoryView .AddressBookHolder .ContactDetails .Chat:hover{ color: var(--primary-brand-color-blue--); } #DirectoryView .AddressBookHolder .ContactDetails .Email:hover{ color: var(--primary-brand-color-blue--); } #DirectoryView .AddressBookHolder .ContactDetails .VoipText:hover{ color: var(--primary-brand-color-blue--); } #DirectoryView .AddressBookHolder .ContactDetails .VideoText:hover{ color: var(--primary-brand-color-blue--); } } /* filename: ../app/css/views/TemplateView.css */ #TemplateView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: auto; text-align: center; overflow-x: hidden; overflow-y: hidden; } /* filename: ../app/css/views/InsightsView.css */ #InsightsView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: InsightsView; container-type: inline-size; } #InsightsView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #InsightsView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #InsightsView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 90px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #InsightsView .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; margin-right: 2px; padding: 0px; top: 0px; right: 0px; height: 50px; width: 38px; vertical-align: middle; background-position: 8px 13px; background-image: url('/assets/images/icons/dashboard_customize_white.svg'); background-repeat: no-repeat; background-size: 24px 24px; cursor: pointer; } #InsightsView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 56px; left: -238px; width: 270px; min-height: 50px; height: auto; background-color: var(--color-superlight-gray--); filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ border-radius: 10px; overflow: hidden; z-index: 1000; } #InsightsView .TitleBarMenuItemsHolder{ position: relative; display: block; margin: 0 auto; margin-top: 1px; margin-bottom: 1px; padding: 0px; width: 100%; height: auto; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.3)); overflow-x: hidden; overflow-y: auto; } #InsightsView .TitleBarMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--color-white--); border-bottom: 1px var(--color-lighter-gray--) solid; cursor: pointer; } #InsightsView .TitleBarMenu .MenuItem .DragIcon{ position: relative; display: inline-block; margin: 10px 0px 10px 0px; top: 0px; left: 0px; width: 0px; height: 30px; vertical-align: middle; background-image: url('/assets/images/icons/drag_indicator_black.svg'); background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; opacity: 0.0; transition: 0.3s; } #InsightsView .TitleBarMenu .MenuItem .Icon{ position: relative; display: inline-block; margin: 0px 10px 0px 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; transition: 0.3s; } #InsightsView .TitleBarMenu .MenuItem .ItemTitle { position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 100px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; transition: 0.3s; } #InsightsView .TitleBarMenu .MenuItem .ToggleButton{ position: relative; display: inline-block; margin: 0 auto; top: 0px; left: 0px; width: 50px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 10px 3px; cursor: pointer; } #InsightsView .TitleBarMenu .MenuItem .on{ background-image: url('/assets/images/icons/toggle_on_black.svg'); } #InsightsView .TitleBarMenu .MenuItem .off{ background-image: url('/assets/images/icons/toggle_off_black.svg'); } #InsightsView .TitleBarMenu .FooterMenuItem { position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #InsightsView .TitleBarMenu .FooterMenuItem .FooterTitle { position: relative; display: inline-block; margin: 0px 20px 0px 20px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 92px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); vertical-align: middle; transition: 0.3s; } #InsightsView .TitleBarMenu .FooterMenuItem .Icon{ position: relative; display: inline-block; margin: 0px 10px 0px 0px; top: 0px; left: 0px; width: 40px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 10px 3px; transition: 0.3s; } #InsightsView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: center; background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #InsightsView .WithoutUserBackground{ background-image: url('/assets/images/views/dashboardview/background.png'); background-repeat:repeat; background-size: 150px 150px; } #InsightsView .WithUserBackground{ background-color: var(--inner-holder-background-color--) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; } .InsightsViewWidgetsContainer{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 5px; width: 1056px; height: auto; min-height: calc(100% - 10px); text-align: left; overflow-x: hidden; overflow-y: auto; /*background-color: var(--color-white--);*/ container-name: InsightsViewWidgetsContainer; container-type: inline-size; } @media only screen and (max-width: 780px){ #InsightsView .TitleBarMenu .FooterMenuItem{ background-color: var(--color-lighter-gray--); } #InsightsView .TitleBarMenu .MenuItem .DragIcon{ opacity: 1.0; width: 30px; } #InsightsView .TitleBarMenu .MenuItem .ItemTitle { width: 140px; } #InsightsView .TitleBarMenu .MenuItem .Icon{ width: 30px; background-position: 3px 3px; } } @media only screen and (hover: hover) and (min-width: 781px){ #InsightsView .TitleBarMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #InsightsView .TitleBarMenu .FooterMenuItem:hover{ background-color: var(--color-lighter-gray--); } #InsightsView .TitleBarMenu .MenuItem:hover .DragIcon{ opacity: 1.0; width: 30px; } #InsightsView .TitleBarMenu .MenuItem:hover .ItemTitle { width: 140px; } #InsightsView .TitleBarMenu .MenuItem:hover .Icon{ width: 30px; background-position: 3px 3px; } } @media only screen and (max-width: 1260px) { .InsightsViewWidgetsContainer{ width: 704px !important; } } @media only screen and (max-width: 820px) { .InsightsViewWidgetsContainer { min-width: 340px !important; max-width: 640px; padding: 0px; padding-top: 5px; text-align: center !important; min-height: calc(100% - 5px); width:100% !important; } .InsightsWidget{ margin: 0 auto; width: calc(100% - 20px) !important; } } @container InsightsView (width > 1151px){ .InsightsViewWidgetsContainer{ width: 1140px !important; } .InsightsWidget{ margin: 20px !important; } } @container InsightsView (width > 1760px){ .InsightsViewWidgetsContainer { width: 1760px !important; } .InsightsWidget{ width: 400px !important; } } /* filename: ../app/css/views/ResetpasswordView.css */ #ResetpasswordView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; font-family: var(--primary-font--); text-align: center; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #ResetpasswordView .ResetPasswordForm{ position: relative; display: block; margin: 0 auto; top: calc(50% - 300px); padding: 0px; width: 600px; height: 550px; } #ResetpasswordView .ResetPasswordForm .ResetPasswordTitle{ position: relative; display: block; top: 0px; left: 0px; margin-top:40px; margin-bottom: 30px; width: 100%; height: 50px; font-family: var(--primary-brand-font--); font-size: 40px; line-height: 40px; text-align: center; color: var(--primary-brand-color-blue--); } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel{ position: relative; display: inline-block; top: 0px; left: 0px; padding: 50px; padding-bottom: 10px; margin-bottom: 30px; width: 500px; min-height: 360px; font-size: 12px; line-height: 20px; text-align: center; color: var(--primary-text-color-dark-gray--); background-color: #ffffff; border-radius: 20px; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel .ErrorMessageHolder{ position: relative; display: inline-block; margin-top: 20px; top: 0px; left: 0px; width: 85%; min-height: 60px; height: auto; font-size: 20px; line-height: 28px; color: var(--primary-text-color-dark-gray--); } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel input[type=text], #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel input[type=password]{ position: relative; display: block; width: 100%; height: 50px; padding: 12px 20px; margin: 20px 0; box-sizing: border-box; font-size: 18px; line-height: 38px; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel input[type=text]:focus, #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel input[type=password]:focus { background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel .ResetButton{ position: relative; display: inline-block; width: 80%; height: 50px; padding: 12px 20px; margin: 20px 0px 0px 0px; box-sizing: border-box; font-size: 18px; line-height: 25px; border: 1px var(--primary-brand-color-blue--) solid; border-radius: 30px; background-color: var(--primary-brand-color-blue--); color: #ffffff; cursor: pointer; transition: 0.3s; } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel .ResetButton:hover{ background-color: var(--primary-brand-color-dark-blue--); transition: 0.3s; } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel .LoginButton{ position: relative; display: inline-block; width: 100%; height: 40px; padding: 20px 20px; margin: 40px 0px 0px 0px; box-sizing: border-box; font-size: 16px; line-height: 22px; color: #000000; border-top: 1px var(--color-light-gray--) solid; cursor: pointer; transition: 0.3s; } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel .LoginButton:hover{ color: var(--primary-brand-color-blue--); transition: 0.3s; } @media only screen and (max-height: 660px) { #ResetpasswordView { overflow-y: auto; } #ResetpasswordView .ResetPasswordForm{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; width: 100%; height: auto; min-height: 100%; overflow: hidden; } } @media only screen and (max-width: 780px) { #ResetpasswordView{ overflow-y: auto; background-color: var(--color-scheme-white--); } #ResetpasswordView .ResetPasswordForm{ position: relative; display: block; margin: 0 auto; top: 0px; padding: 0px; width: 100%; height: auto; min-height: 100%;; } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel .ErrorMessageHolder{ font-size: 18px; line-height: 22px; margin-top:20px; margin-bottom:0px; } #ResetpasswordView .ResetPasswordForm .ResetPasswordTitle{ position: absolute; display: block; margin: 0px; padding: 0px; top: 30px; left: 0px; width: 100%; font-size: 36px; z-index: 1000; } #ResetpasswordView .ResetPasswordForm .ResetPasswordPanel{ position: relative; display: block; margin: 0px; padding: 0px; padding: 20px; padding-top: 80px; top: 0px; left: 0px; width: calc(100% - 40px); height: calc(100% - 100px); border-radius: 0px; filter: unset; border: none; } } /* filename: ../app/css/views/MailboxView.css */ #MailboxView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: left; background-color: var(--view-background-color--); overflow: hidden; container-name: MailboxView; container-type: inline-size; } #MailboxView > .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #MailboxView > .Titlebar > .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #MailboxView > .Titlebar > .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #MailboxView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #MailboxView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #MailboxView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #MailboxView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #MailboxView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #MailboxView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: inherit; background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #MailboxView .InnerHolder .MailSidebarHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 260px; height: 100%; text-align: inherit; background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #MailboxView .InnerHolder .MailSidebarHolder .MailboxSidebar{ position: relative; display: block; margin: 0 auto; margin-top: 50px; padding: 0px; width: 100%; height: auto; min-height: 200px; } #MailboxView .InnerHolder .MailSidebarHolder .MailboxSidebar .ComposeButton{ position: relative; display: block; margin: 0 auto; margin-bottom: 20px; padding: 0px; width: calc(100% - 60px); height: 40px; background-color: var(--color-scheme-blue-l2--); border: 2px var(--color-scheme-white--) solid; border-radius: 15px; transition: 0.2s linear; cursor: pointer; } #MailboxView .InnerHolder .MailSidebarHolder .MailboxSidebar .ComposeButton .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 40px; background-size: 20px 20px; background-position: 10px 10px; background-image: url('/assets/images/icons/edit_document_white.svg'); background-repeat: no-repeat; vertical-align: top; overflow: hidden; } #MailboxView .InnerHolder .MailSidebarHolder .MailboxSidebar .ComposeButton .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: calc(100% - 50px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; color: var(--primary-text-color-white--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; overflow: hidden; } #MailboxView .InnerHolder .MailHolder .MobileComposeButton{ position: absolute; display: none; margin: 0 auto; padding: 0px; bottom: 60px; right: 10px; width: 50px; height: 50px; background-color: var(--color-scheme-blue-l2--); background-size: 30px 30px; background-position: 10px 10px; background-image: url('/assets/images/icons/edit_document_white.svg'); background-repeat: no-repeat; border: 2px var(--color-scheme-white--) solid; border-radius: 15px; cursor: pointer; } #MailboxView .InnerHolder .MailSidebarHolder .MailboxSidebar .SidebarFolderListHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; } #MailboxView .InnerHolder .ListHolder{ position: relative; display: block; margin: 0 auto; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: auto; min-height: 50px; } #MailboxView .InnerHolder .ListHolder .ListTitle{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; height: 40px; width: calc(100% - 60px); font-family: var(--primary-font--); font-size: 16px; font-weight: bold; line-height: 40px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } #MailboxView .InnerHolder .ListHolder .AddButton{ position: relative; display: inline-block; width: 40px; height: 40px; background-image: url('/assets/images/icons/add_black.svg'); background-position: 10px 10px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; cursor: pointer; overflow: hidden; } #MailboxView .InnerHolder .ListHolder .FolderItem{ position: relative; display: block; margin: 0 auto; margin-bottom: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: auto; min-height: 40px; border-radius: 20px; cursor: pointer; } #MailboxView .InnerHolder .ListHolder .FolderItem.Selected{ background-color: var(--color-scheme-blue-l6--); } #MailboxView .InnerHolder .ListHolder .FolderItem:hover{ background-color: var(--color-scheme-gray-l1--); } #MailboxView .InnerHolder .ListHolder .FolderItem .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 40px; background-position: 8px 8px; background-size: 24px 24px; background-repeat: no-repeat; vertical-align: top; } #MailboxView .InnerHolder .ListHolder .FolderItem .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 40px; width: calc(100% - 150px); font-family: var(--primary-font--); font-size: 15px; line-height: 40px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } #MailboxView .InnerHolder .ListHolder .FolderItem.Selected .Title{ font-weight: bold; } #MailboxView .InnerHolder .ListHolder .FolderItem .Count{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 40px; width: 80px; font-family: var(--primary-font--); font-size: 15px; line-height: 40px; text-align: right; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } #MailboxView .InnerHolder .ListHolder .FolderItem.Selected .Count{ font-weight: bold; } #MailboxView .InnerHolder .ListHolder .FolderItem .Count_rtl{ text-align: left; direction: ltr; } #MailboxView .InnerHolder .ListHolder .FolderItem .MenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 40px; width: 30px; vertical-align: middle; background-position: 5px 0px; background-image: url(/assets/images/icons/menu_dots_black.svg); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; opacity: 0.0; transition: 0.2s linear; } #MailboxView .InnerHolder .ListHolder .FolderItem:hover .MenuButton{ opacity: 1.0; } #MailboxView .InnerHolder .ListHolder .FolderItem .MenuButton .Menu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 40px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #MailboxView .InnerHolder .ListHolder .FolderItem .MenuButton .Menu_rtl{ left: unset; right: -180px; } #MailboxView .InnerHolder .ListHolder .FolderItem .MenuButton .Menu .Item{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #MailboxView .InnerHolder .ListHolder .FolderItem .MenuButton .Menu .Item .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #MailboxView .InnerHolder .ListHolder .FolderItem .MenuButton .Menu .Item .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; font-weight: normal; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #MailboxView .InnerHolder .MailHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 260px); height: 100%; text-align: inherit; background-color: var(--inner-holder-background-color--); overflow: hidden; } #MailboxView .InnerHolder .MailNavigationBar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: inherit; background-color: var(--inner-holder-background-color--); } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarIcon { position: relative; display: inline-block; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; background-image: url('/assets/images/icons/inbox_black.svg'); vertical-align: top; overflow: hidden; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarTitleHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 200px; height: 50px; vertical-align: top; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: auto; max-width: 200px; height: 50px; font-family: var(--primary-font--); font-weight: bold; font-size: 18px; line-height: 50px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle.NavigationBarTitle_rtl{ } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .Space1{ position: relative; display: inline-block; width: calc(50% - 390px); height: 40px; vertical-align: middle; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .InfoHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; top: 0px; left: 0px; width: 300px; height: 38px; vertical-align: top; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 15px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .SearchField{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 220px; height: 40px; vertical-align: middle; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #MailboxView .InnerHolder .MailContainer{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: left; background-color: var(--color-scheme-white--); border-top-left-radius: 10px; border: 1px var(--color-scheme-gray-l2--) solid; overflow-x: hidden; overflow-y: auto; } #MailboxView .InnerHolder .MailContainer_rtl{ border-top-right-radius: 10px; border-top-left-radius: 0px; } #MailboxView .InnerHolder .MailContainer .EmailTable{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-bottom: 48px; width: 100%; min-height: calc(100% - 48px); height: auto; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: 80px; border-bottom: 1px var(--color-light-gray--) solid; transition: 0.2s linear; cursor: pointer; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem.EmailItem_rtl{ direction: rtl; text-align: right; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Line1{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 35px; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Line2{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 20px; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Line3{ display: flex; justify-content: space-between; align-items: center; height: 20px; width: 100%; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Logo{ position: relative; display: inline-block; margin: 5px; margin-top: 25px; margin-left: 9px; margin-right: 9px; padding: 0px; width: 30px; height: 30px; vertical-align: top; border-radius: 20px; overflow: hidden; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Envelop{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 20px; height: 40px; background-image: url('/assets/images/icons/email_unread_black.svg'); background-position: 0px 10px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Envelop.Read{ background-image: url('/assets/images/icons/email_read_black.svg') !important; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Sender{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: calc(100% - 138px); height: 40px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 40px; text-align: start; unicode-bidi: plaintext; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; overflow: hidden; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Sender.Read{ font-weight: normal; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Sender_rtl{ text-align: right; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Recipient{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: calc(100% - 138px); height: 40px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 40px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; overflow: hidden; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Recipient_rtl{ text-align: right; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Attachment{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 20px; height: 40px; background-image: url('/assets/images/icons/attachment_black.svg'); background-position: 1px 12px; background-size: 18px 18px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; opacity: 0.0; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Attachment.Visible{ opacity: 1.0; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .MenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 10px 0px; background-image: url(/assets/images/icons/menu_dots_black.svg); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Subject{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 50px; padding-right: 10px; width: calc(100% - 60px); height: 20px; font-family: var(--primary-font--); font-size: 15px; color: var(--color-dark-gray--); line-height: 18px; text-align: inherit; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .Subject.Subject_rtl{ padding-left: 10px; padding-right: 50px; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .FirstLine { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px 0 50px; height: 20px; box-sizing: border-box; font-family: var(--primary-font--); font-size: 15px; color: var(--color-gray--); line-height: 20px; text-align: inherit; unicode-bidi: plaintext; vertical-align: top; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .FirstLine.FirstLine_rtl{ padding-left: 10px; padding-right: 50px; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .ReceivedAt { position: relative; display: inline-block; margin: 0; padding: 0 10px; width: auto; height: 20px; font-family: var(--primary-font--); font-size: 14px; color: var(--color-dark-gray--); line-height: 20px; text-overflow: ellipsis; white-space: nowrap; text-align: right; vertical-align: top; overflow: hidden; flex-shrink: 0; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .ReceivedAt.ReceivedAt_rtl{ text-align: left; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .MenuButton .ItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 40px; left: -160px; width: 190px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .MenuButton .ItemMenu.ItemMenu_rtl{ left: 3px !important; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .MenuButton .ItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .MenuButton .ItemMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .MenuButton .ItemMenu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem .MenuButton .ItemMenu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #MailboxView .InnerHolder .MailContainer .EmailTable .EmptyTableItem{ position: absolute; display: block; top: calc(50% - 40px); left: 0px; margin:0px; padding: 0px; width: 100%; height: 80px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 80px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; } #MailboxView .InnerHolder .MailHolder .TablePaginationHolder{ position: absolute; display: block; bottom: 0px; left: 0px; margin: 0 auto; margin-top:0px; text-align: center; width: 100%; height: 50px; background-color: rgba(255,255,255,0.6); border-top: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; } #MailboxView .InnerHolder .MailHolder .TablePaginationHolder .PaginationInnerHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 280px; height: 38px; background-color: var(--color-scheme-white--); border-radius: 20px; border: 1px var(--color-scheme-gray-l2--) solid; } #MailboxView .InnerHolder .MailHolder .TablePaginationHolder .PaginationInnerHolder .PreviousPageButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 36px; height: 36px; background-image: url(/assets/images/icons/arrow_left_black.svg); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; opacity: 0.8; overflow: hidden; cursor: pointer; } #MailboxView .InnerHolder .MailHolder .TablePaginationHolder .PaginationInnerHolder .PreviousPageButton.PreviousPageButton_rtl{ background-image: url(/assets/images/icons/arrow_right_black.svg); } #MailboxView .InnerHolder .MailHolder .TablePaginationHolder .PaginationInnerHolder .PageInfoHolder{ position: relative; display: inline-block; padding-left: 15px; padding-right: 15px; width: 178px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; direction: ltr; color: var(--primary-text-color-dark-gray--); vertical-align: middle; overflow: hidden; } #MailboxView .InnerHolder .MailHolder .TablePaginationHolder .PaginationInnerHolder .NextPageButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 36px; height: 36px; background-image: url(/assets/images/icons/arrow_right_black.svg); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; opacity: 0.8; overflow: hidden; cursor: pointer; } #MailboxView .InnerHolder .MailHolder .TablePaginationHolder .PaginationInnerHolder .NextPageButton.NextPageButton_rtl{ background-image: url(/assets/images/icons/arrow_left_black.svg); } #MailboxView .FolderNameEditorContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 500; } #MailboxView .FolderPickerContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } .MailboxViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; z-index: 600; } .MailboxViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } #MailboxView .InnerHolder .MailHolder .MobileSidebarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 51px; left: 0px; width: 260px; height: calc(100% - 52px); background-color: var(--color-scheme-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); overflow-x: hidden; overflow-y: auto; z-index: 100; } #MailboxView .InnerHolder .MailHolder .MobileSidebarMenu.MobileSidebarMenu_rtl{ left: unset !important; right: 0px !important; } #MailboxView .InnerHolder .MailHolder .MobileSidebarFolderListHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 20px; padding: 0px; top: 0px; left: 0px; width: 100%; height: auto; min-height: calc(100% - 336px); text-align: inherit; } @container MailboxView (width < 1040px){ #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .InfoHolder{ display: none; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .Space1{ width: calc(100% - 410px); } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .Space2{ display: none; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .SearchField { width: 160px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .SearchField input[type=text] { width: 160px; } } @media only screen and (max-width: 780px) { #MailboxView .InnerHolder .MailSidebarHolder{ display: none; } #MailboxView .InnerHolder .MailHolder{ width: 100%; } #MailboxView .InnerHolder .MailHolder .MailNavigationBar{ height: 50px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarTitleHolder{ max-width: 150px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle{ padding-right: 30px; max-width: 120px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle.NavigationBarTitle_rtl{ padding-right: 0px; padding-left: 30px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle::after { content: "▼"; font-size: 10px; color: var(--primary-text-color-dark-gray--); position: absolute; right: 10px; top: 26px; transform: translateY(-50%); pointer-events: none; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle.NavigationBarTitle_rtl::after { left: 10px; right: unset } #MailboxView .InnerHolder .MailHolder .MailContainer{ height: calc(100% - 52px); border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; } #MailboxView .InnerHolder .MailContainer .EmailTable{ padding-bottom: 122px; min-height: calc(100% - 122px); } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .NavigationBarTitle { width: 150px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .Space1 { width: calc(100% - 350px); } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .SearchField { width: 150px; } #MailboxView .InnerHolder .MailNavigationBar .NavigationBar .SearchField input[type=text] { width: 150px; } #MailboxView .InnerHolder .MailHolder .MobileComposeButton{ display: block; } #MailboxView .InnerHolder .ListHolder .FolderItem .MenuButton{ opacity: 1.0; } } @media only screen and (min-width: 781px){ #MailboxView .InnerHolder .MailHolder .MobileSidebarMenu{ display: none !important; } } @media only screen and (hover: hover) and (min-width: 781px){ #MailboxView .InnerHolder .MailSidebarHolder .MailboxSidebar .ComposeButton:hover{ background-color: var(--color-scheme-blue-l1--); } #MailboxView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #MailboxView .InnerHolder .MailContainer .EmailTable .EmailItem:hover{ background-color: var(--color-scheme-gray-l1--); } #MailboxView .InnerHolder .ListHolder .FolderItem .MenuButton .Menu .Item:hover{ background-color: var(--color-lighter-gray--); } } /* filename: ../app/css/views/CalendarView.css */ #CalendarView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: inherit; background-color: var(--view-background-color--); overflow: hidden; } #CalendarView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #CalendarView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #CalendarView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 206px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #CalendarView .Titlebar .LayoutPickerHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 120px; height: 50px; text-align: inherit; direction: inherit; vertical-align: middle; } #CalendarView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; opacity: 1.0; } #CalendarView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -170px; width: 190px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #CalendarView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #CalendarView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #CalendarView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendarView > .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: inherit; background-color: var(--inner-holder-background-color--); overflow: hidden; } #CalendarView > .InnerHolder .CalendarSidebarHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 260px; height: 100%; text-align: inherit; background-color: var(--inner-holder-background-color--); overflow: hidden; } #CalendarView .InnerHolder .CalendarSidebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: inherit; background-color: var(--inner-holder-background-color--); } #CalendarView .InnerHolder > .CalendarHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 260px); height: 100%; text-align: left; background-color: var(--inner-holder-background-color--); overflow: hidden; } #CalendarView .InnerHolder .CalendarNavigationBar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: inherit; background-color: var(--inner-holder-background-color--); } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 110px); height: 50px; vertical-align: middle; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder .DateText{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 20px; line-height: 50px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder .DateText_rtl{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 20px; line-height: 50px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .MobileSidebarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 51px; left: 0px; width: 260px; height: calc(100% - 52px); background-color: var(--color-scheme-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); overflow: hidden; z-index: 1000; } #CalendarView .InnerHolder .CalendarHolder .MobileSidebarMenu.MobileSidebarMenu_rtl{ left: unset !important; right: 0px !important; } #CalendarView .InnerHolder .CalendarHolder .MobileSidebarMenu .MobileSidebarCalendarListHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: -8px; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 266px); text-align: inherit; overflow-x: hidden; overflow-y: auto; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 106px; height: 50px; vertical-align: middle; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder .LeftButton{ position: relative; display: inline-block; margin: 0 auto; margin-top: 2px; padding: 0px; width: 30px; height: 46px; background-image: url('/assets/images/icons/arrow_left_black.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 0px 8px; vertical-align: middle; border-radius: 10px; overflow: hidden; cursor: pointer; transition: 0.1s linear; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder .LeftButton:active{ background-color: var(--color-scheme-gray-l2--); } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder .LeftButton_rtl{ background-image: url('/assets/images/icons/arrow_right_black.svg') !important; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder .HomeButton{ position: relative; display: inline-block; margin: 0 auto; margin-top: 2px; padding: 0px; width: 46px; height: 46px; background-image: url('/assets/images/icons/date_today_black.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 8px 8px; vertical-align: middle; border-radius: 10px; overflow: hidden; cursor: pointer; transition: 0.1s linear; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder .HomeButton:active{ background-color: var(--color-scheme-gray-l2--); } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder .RightButton{ position: relative; display: inline-block; margin: 0 auto; margin-top: 2px; padding: 0px; width: 30px; height: 46px; background-image: url('/assets/images/icons/arrow_right_black.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 0px 8px; vertical-align: middle; border-radius: 10px; overflow: hidden; cursor: pointer; transition: 0.1s linear; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder .RightButton:active{ background-color: var(--color-scheme-gray-l2--); } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder .RightButton_rtl{ background-image: url('/assets/images/icons/arrow_left_black.svg') !important; } #CalendarView .LayoutPickerButton{ position: relative; display: inline-block; margin: 0 auto; margin: 5px; padding: 0px; width: 110px; height: 40px; background-color: var(--color-scheme-blue-l1--); border-radius: 5px; text-align: inherit; direction: inherit; transition: 0.1s linear; cursor: pointer; } #CalendarView .LayoutPickerButton .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 110px; height: 40px; text-align: inherit; direction: inherit; } #CalendarView .LayoutPickerButton .Title .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 40px; text-align: inherit; direction: inherit; background-position: 8px 8px; background-size: 24px 24px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #CalendarView .LayoutPickerButton .Title .Icon.Day{ background-image: url('/assets/images/icons/calendar_day_view_white.svg'); } #CalendarView .LayoutPickerButton .Title .Icon.Week{ background-image: url('/assets/images/icons/calendar_week_view_white.svg'); } #CalendarView .LayoutPickerButton .Title .Icon.Month{ background-image: url('/assets/images/icons/calendar_month_view_white.svg'); } #CalendarView .LayoutPickerButton .Title .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-right: 10px; width: calc(100% - 50px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; direction: inherit; color: var(--primary-text-color-white--); vertical-align: middle; overflow: hidden; } #CalendarView .LayoutPickerButton .Menu{ position: absolute; display: none; margin: 0 auto; padding: 5px; top: 48px; left: -5px; width: 110px; height: auto; min-height: 50px; background-color: var(--color-scheme-white--); overflow: hidden; background-color: var(--color-scheme-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); z-index: 1000; } #CalendarView .LayoutPickerButton .Menu .Item{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; background-color: var(--color-scheme-gray-l0--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #CalendarView .LayoutPickerButton .Menu .Item .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 40px; background-position: 8px 8px; background-size: 24px 24px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #CalendarView .LayoutPickerButton .Menu .Item .Icon.Day{ background-image: url('/assets/images/icons/calendar_day_view_black.svg'); } #CalendarView .LayoutPickerButton .Menu .Item .Icon.Week{ background-image: url('/assets/images/icons/calendar_week_view_black.svg'); } #CalendarView .LayoutPickerButton .Menu .Item .Icon.Month{ background-image: url('/assets/images/icons/calendar_month_view_black.svg'); } #CalendarView .LayoutPickerButton .Menu .Item .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 40px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; color: var(--primary-text-color-dark-gray--); vertical-align: middle; overflow: hidden; } #CalendarView .LayoutPickerButton .Menu .Item:last-child{ border-bottom: unset; } #CalendarView .InnerHolder .CalendarContainer{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: inherit; background-color: var(--color-scheme-white--); border-top-left-radius: 10px; border: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; } #CalendarView .InnerHolder .CalendarContainer_rtl{ border-top-right-radius: 10px; border-top-left-radius: 0px; } #CalendarView .InnerHolder .CalendarSidebar .SidebarCalendarHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top:50px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 266px; } #CalendarView .InnerHolder .CalendarSidebar .SidebarCalendarListHolder{ position: relative; display: inline-block; margin: 0 auto; margin: 10px; margin-bottom: 0px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 20px); height: calc(100% - 326px); border-top: 1px var(--color-scheme-gray-l1--) solid; overflow-x: hidden; overflow-y: auto; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView{ position: relative; display: flex; /* Changed from block */ flex-direction: column; /* Stacks children vertically */ margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: inherit; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .CalendarHeader{ position: relative; display: grid; margin: 0 auto; padding: 0px; height: 40px; width: calc(100% - 10px); text-align: inherit; grid-template-columns: repeat(7, 1fr); gap: 5px; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .CalendarHeader .CalendarTitleItem{ font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--primary-text-color-dark-gray--); padding: 6px 0; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar{ position: relative; display: grid; margin: 0 auto; padding: 0px; padding: 0px 5px 5px 3px; height: calc(100% - 45px); width: calc(100% - 10px); text-align: inherit; grid-template-columns: repeat(7, 1fr); gap: 1px; overflow-x: hidden; overflow-y: auto; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .OutOfMonthCalendarItem{ margin: 1px; background: var(--color-scheme-white--); border: 1px solid transparent; display: flex; flex-direction: column; gap: 1px; border: 2px var(--color-scheme-gray-l1--) solid; background-color: var(--color-scheme-white--); opacity: 0.6; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem{ margin: 1px; display: flex; flex-direction: column; text-align: inherit; gap: 1px; border: 2px var(--color-scheme-gray-l0--) solid; background-color: var(--color-scheme-gray-l0--); cursor: pointer; transition: 0.2s linear; overflow: hidden; container-name: CalendarMonthItem; container-type: inline-size; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem:active{ color: var(--color-white--); background-color: var(--primary-brand-color-light-blue--); border: 2px var(--primary-brand-color-light-blue--) solid; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem.Selected{ border: 2px var(--color-scheme-blue-l6--) solid; background-color: var(--color-scheme-blue-l6--); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem .EventsHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 22px); overflow-x: hidden; overflow-y: auto; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem .Event{ position: relative; display: block; margin: 0 auto; margin-bottom: 1px; padding: 0px; width: calc(100% - 2px); height: 20px; background-color: var(--color-scheme-white--); border-radius: 5px; font-size: 12px; line-height: 20px; overflow: hidden; cursor: pointer; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem .Event .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 10px); height: 20px; font-family: var(--primary-font--); font-size: 1em; line-height: 20px; color: var(--primary-text-color-dark-gray--); text-align: inherit; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem .Event .Title .Time{ position: relative; display: inline-block; vertical-align: middle; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem .DateHolder{ position: relative; display: block; margin: 0 auto; margin-top: 2px; padding: 0px; height: 22px; width: calc(100% - 4px); text-align: inherit; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem .DateHolder .Date{ position: relative; display: block; margin: 0px; padding: 0px; width: 20px; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; border-radius: 10px; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem .DateHolder .Date.CurrentDate{ background-color: var(--color-scheme-blue-l2--); color: var(--color-scheme-white--); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekDays { flex: 0 0 auto; display: grid; grid-template-columns: 60px repeat(7, 1fr); background: var(--color-scheme-white--); border-bottom: 1px solid var(--color-scheme-gray-l2--); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekDays .WeekDay{ height: 50px; cursor: pointer; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekDays .WeekDay .Name{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 20px; text-align: center; font-family: var(--primary-font--); font-size: 14px; line-height: 25px; text-align: center; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekDays .WeekDay .Date{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 28px; height: 28px; text-align: center; font-family: var(--primary-font--); font-size: 18px; line-height: 28px; text-align: center; color: var(--primary-text-color-dark-gray--); margin-bottom: 2px; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekDays .WeekDay .Date.CurrentDate{ border-radius: 15px; color: var(--color-scheme-white--); background-color: var(--color-scheme-blue-l2--); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView, #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView { display: grid; grid-template-columns: 60px 1fr; flex: 1 1 auto; /* Grow to fill remaining space */ background: var(--color-scheme-white--); overflow-x: hidden; overflow-y: auto; height: auto; /* Flex handles height now, not calc */ } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Timeline{ display: grid; grid-template-rows: repeat(24, 60px); border-right: 1px var(--color-scheme-gray-l2--) solid; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Timeline_rtl{ border-right: unset !important; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Timeline .TimeItem { position: relative; display: inline-block; width: 100%; height: 60px; font-family: var(--primary-font--); font-size: 16px; line-height: 0px; text-align: center; color: var(--primary-text-color-dark-gray--); overflow: visible; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Timeline .TimeItem::after { content: ""; position: absolute; top: -1px; right: -10; width: 10px; height: 0; border-top: 1px solid var(--color-scheme-gray-l2--); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Timeline .TimeItem::after:first-child{ border-top: unset; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Timeline .TimeItem:last-child { border-bottom: unset; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .WeekHolder{ display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(24, 60px); position: relative; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .WeekHolder .Day{ grid-row: span 24; grid-template-rows: 50px 1fr; background: var(--color-scheme-white--); border-right: 1px solid var(--color-scheme-gray-l2--); position: relative; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .WeekHolder .Day::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: repeating-linear-gradient(to bottom,transparent 0,transparent 59px,var(--color-scheme-gray-l2--) 59px,var(--color-scheme-gray-l2--) 60px); pointer-events: none; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Day .Event{ position: absolute; display: block; margin: 0 auto; margin-left: 1px; margin-right: 1px; padding: 0px; width: calc(100% - 4px); height: 20px; background-color: var(--color-scheme-white--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 5px; font-size: 12px; line-height: 15px; overflow: hidden; cursor: pointer; z-index: 500; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Day .Event .Title{ position: relative; display: block; margin: 0 auto; margin-top: 4px; padding: 0px; width: calc(100% - 10px); height: 16px; font-family: var(--primary-font--); font-size: 12px; line-height: 16px; color: var(--primary-text-color-dark-gray--); text-align: inherit; text-overflow: ellipsis; white-space: nowrap; word-break: break-word; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Day .Event .Title.MultiLine{ text-overflow: unset; white-space: unset; line-height: 16px; min-height: 16px; height: auto; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Day .Event .TimeHolder{ position: relative; display: block; margin: 0 auto; margin-top: 2px; padding: 0px; width: calc(100% - 10px); min-height: 16px; height: auto; font-family: var(--primary-font--); font-size: 12px; line-height: 16px; color: var(--primary-text-color-dark-gray--); text-align: inherit; word-break: break-word; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView { display: grid; grid-template-columns: 60px 1fr; width: 100%; height: 100%; background: var(--color-scheme-white--); overflow-x: hidden; overflow-y: auto; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .Timeline { display: grid; grid-template-rows: repeat(24, 60px); border-right: 1px var(--color-scheme-gray-l2--) solid; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .Timeline_rtl{ border-right: unset !important; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .Timeline .TimeItem { position: relative; display: inline-block; width: 100%; height: 60px; font-family: var(--primary-font--); font-size: 16px; line-height: 0px; text-align: center; color: var(--primary-text-color-dark-gray--); overflow: visible; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .Timeline .TimeItem::after { content: ""; position: absolute; top: -1px; right: -10; width: 10px; height: 0; border-top: 1px solid var(--color-scheme-gray-l2--); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .Timeline .TimeItem::after:first-child { border-top: unset; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .Timeline .TimeItem:last-child { border-bottom: unset; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .DayHolder { grid-row: span 24; grid-template-rows: 50px 1fr; background: var(--color-scheme-white--); border-right: 1px solid var(--color-scheme-gray-l2--); position: relative; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .DayHolder::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: repeating-linear-gradient(to bottom,transparent 0,transparent 59px,var(--color-scheme-gray-l2--) 59px,var(--color-scheme-gray-l2--) 60px); pointer-events: none; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .DayHolder .Event { position: absolute; display: block; margin: 0 auto; margin-left: 2px; margin-right: 2px; padding: 0px; width: 100%; max-width: calc(100% - 8px); height: 20px; background-color: var(--color-scheme-white--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 5px; font-size: 14px; line-height: 100%; overflow: hidden; cursor: pointer; z-index: 500; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .DayHolder .Event .Title{ position: relative; display: block; margin: 0 auto; margin-top: 4px; padding: 0px; width: calc(100% - 10px); height: 16px; font-family: var(--primary-font--); font-size: 14px; line-height: 16px; color: var(--primary-text-color-dark-gray--); text-align: inherit; text-overflow: ellipsis; white-space: nowrap; word-break: break-word; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .DayHolder .Event .Title.MultiLine{ text-overflow: unset; white-space: unset; min-height: 16px; height: auto; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .DayHolder .Event .TimeHolder{ position: relative; display: block; margin: 0 auto; margin-top: 2px; padding: 0px; width: calc(100% - 10px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 14px; line-height: 16px; color: var(--primary-text-color-dark-gray--); text-align: inherit; word-break: break-word; overflow: hidden; z-index: 1000; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .CurrentTimeIndicator{ position: absolute; display: block; width: calc(100% + 20px); height: 2px; left: -10px; background-color:var(--primary-text-color-brand-blue--); border: 1px var(--color-scheme-white--) solid; border-radius: 3px; pointer-events: none; z-index: 501; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .CurrentTimeIndicator .CurrentTimeIndicatorText{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: -11px; left: -45px; width: 50px; height: 20px; font-family: var(--primary-font--); font-size: 12px; line-height: 20px; color: var(--primary-text-color-white--); text-align: center; background-color: var(--color-scheme-blue-l2--); border-radius: 12px; border: 1px var(--color-scheme-white--) solid; overflow: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .CurrentTimeIndicator .CurrentTimeIndicatorText_rtl{ left: unset; right: -45px; } #CalendarView .InnerHolder .CalendarListsHolder{ position: relative; display: block; margin: 0 auto; padding: 12px; width: 224px; height: auto; min-height: calc(100% - 30px); background-color: var(--color-scheme-gray-l0--); border-radius: 5px; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList{ position: relative; display: block; margin: 0 auto; margin-bottom: 10px; padding: 0px; width: 100%; height: auto; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 30px; overflow: hidden; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .TitleHolder .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 30px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; font-weight: bold; unicode-bidi: plaintext; vertical-align: top; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; overflow: hidden; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .TitleHolder .Title.NoButton{ width: 100%; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .TitleHolder .AddButton{ position: relative; display: inline-block; width: 30px; height: 30px; background-image: url('/assets/images/icons/add_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; cursor: pointer; overflow: hidden; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder{ position: relative; display: block; width: 100%; height: auto; min-height: 30px; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 30px; cursor: pointer; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .Checkbox{ position: relative; display: inline-block; margin: 5px; padding: 0px; width: 20px; height: 20px; vertical-align: middle; background-image: url('/assets/images/icons/check_box_black.svg'); background-position: -2px -2px; background-size: 24px 24px; background-repeat: no-repeat; border-radius: 3px; overflow: hidden; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .Checkbox.Checked{ background-image: url('/assets/images/icons/check_box_checked_black.svg'); } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 60px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; overflow: hidden; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 30px; vertical-align: middle; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-position: 5px 5px; background-size: 20px 20px; background-repeat: no-repeat; opacity: 0.0; transition: 0.2s linear; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu{ position: absolute; display: none; max-width: 130px; width: auto; height: auto; min-height: 50px; top: 30px; right: 0px; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 500; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu.Menu_rtl{ right: unset; left: 0px; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 130px; height: 40px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 5px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 40px); height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu .ColorPicker{ position: relative; display: block; margin: 0 auto; margin-bottom: 5px; padding: 0px; width: 110px; height: auto; min-height: 30px; text-align: center; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu .ColorPicker .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; top: 0px; left: 0px; width: calc(100% - 10px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu .ColorPicker .ColorItem{ position: relative; display: inline-block; margin: 0 auto; padding: 2px; width: 20px; height: 20px; vertical-align: top; border-radius: 14px; border: 1px var(--color-scheme-white--) solid; } #CalendarView .InnerHolder .CalendarGhostEvent { position: absolute; display: none; margin: 0 auto; padding: 0px; left: 2px; right: 2px; box-sizing: border-box; align-items: center; justify-content: center; background-color: rgba(66, 133, 244, 0.15); border: 2px dashed rgba(66, 133, 244, 0.5); border-radius: 4px; pointer-events: none; z-index: 5; cursor: pointer; } #CalendarView .InnerHolder .CalendarGhostEvent .TimeLabel { font-family: var(--primary-font--); font-size: 11px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-brand-blue--); pointer-events: none; white-space: normal; overflow-wrap: break-word; word-break: break-word; } .CalendarViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); overflow: hidden; z-index: 1000; } .CalendarViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; /*background-color: var(--color-white--);*/ overflow: hidden; overflow-y: auto; transition: 0.2s; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .AllDayRow { position: relative; display: flex; flex: 0 0 auto; width: 100%; height: auto; min-height: 30px; /* Increased from 32px */ max-height: 150px; border-bottom: 1px var(--color-scheme-gray-l2--) solid; background-color: var(--color-scheme-white--); overflow-y: auto; overflow-x: hidden; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .AllDayRow .TimelineSpacer { position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center; width: 62px; height: auto; min-height: 30px; vertical-align: top; border-inline-end: 1px var(--color-scheme-gray-l2--) solid; font-size: 11px; line-height: 1.2; white-space: normal; word-wrap: break-word; color: var(--color-scheme-gray-d1--); font-weight: bold; text-transform: uppercase; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .AllDayRow .TimelineSpacer.TimelineSpacer_rtl { direction: rtl; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .AllDayRow .TimelineSpacer_rtl { border-right: unset !important; border-left: 1px var(--color-scheme-white--) solid; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .AllDayRow .AllDayEventsHolder { position: relative; display: block; flex: 1 1 auto; min-height: 30px; height: auto; width: 100%; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .AllDayRow .AllDayEventsHolder_rtl { text-align: right !important; } #CalendarView .AllDayDayCell { position: absolute; height: 100%; width: calc(100% / 7); border-right: 1px var(--color-scheme-gray-l2--) solid; pointer-events: none; /* Let clicks hit the events instead */ box-sizing: border-box; } #CalendarView .AllDayDayCell:nth-child(1) { left: 0%; } #CalendarView .AllDayDayCell:nth-child(2) { left: calc(100% / 7 * 1); } #CalendarView .AllDayDayCell:nth-child(3) { left: calc(100% / 7 * 2); } #CalendarView .AllDayDayCell:nth-child(4) { left: calc(100% / 7 * 3); } #CalendarView .AllDayDayCell:nth-child(5) { left: calc(100% / 7 * 4); } #CalendarView .AllDayDayCell:nth-child(6) { left: calc(100% / 7 * 5); } #CalendarView .AllDayDayCell:nth-child(7) { left: calc(100% / 7 * 6); } #CalendarView .AllDayRow .TimelineSpacer_rtl ~ .AllDayEventsHolder .AllDayDayCell { border-right: unset; border-left: 1px var(--color-scheme-gray-l2--) solid; } #CalendarView .AllDayRow .TimelineSpacer_rtl ~ .AllDayEventsHolder .AllDayDayCell:last-child { border-left: unset; } #CalendarView .Event.AllDayEvent { position: absolute; display: block; margin: 2px 0; height: 24px; border-radius: 4px; font-size: 13px; font-weight: 500; line-height: 24px; color: var(--primary-text-color-dark-gray--); border: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; cursor: pointer; z-index: 10; } .AllDayEventsHolder.WeekViewGrid { position: relative; /*background-color: var(--color-scheme-white--) !important;*/ /* The vertical lines */ background-image: linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px); /* 100% / 7 creates the 7 daily columns */ background-size: calc(100% / 7) 100%; background-repeat: repeat-x; /* Shift 1px left to align with the TimelineSpacer border */ background-position: -1px 0; } /* Ensure the events are above the background grid */ .AllDayEvent { z-index: 10 !important; } /* Pending: Slanted stripes with a fixed background color */ #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Event.Pending { background-color: #f0f0f0; /* The fixed background color */ background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent ); background-size: 10px 10px; /* Controls the thickness of the stripes */ border: 1px dashed #ccc; } /* Tentative: A subtle "mesh" or lighter opacity mask */ #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Event.Tentative { background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent ); background-size: 10px 10px; /* Controls the thickness of the stripes */ border: 1px dashed #ccc; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Event.Declined { background-color: #d1d5db !important; /* Muted gray (Tailwind gray-300 style) */ background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.08) 75%, transparent 75%, transparent ); background-size: 10px 10px; border: 1px solid #9ca3af; /* Solid border to show it's a "final" (though changeable) state */ opacity: 0.6; /* 60% transparency */ filter: grayscale(100%); /* Removes any vibrant category colors */ text-decoration: line-through; /* Visual "Cancelled" effect */ } @container CalendarMonthItem (width < 90px){ #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem .Event .Title .Time{ display: none; } } @media only screen and (max-width: 780px) { #CalendarView .InnerHolder .CalendarSidebarHolder{ display: none; } #CalendarView .InnerHolder .CalendarHolder{ width: 100%; } #CalendarView .InnerHolder .CalendarHolder .CalendarNavigationBar{ height: 50px; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar > .ButtonsHolder{ display: none; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder { margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); font-size: 16px; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder .DateText{ position: relative; display: inline-block; margin: 0px; margin-top: 4px; padding: 0px; padding-left: 10px; padding-right: 30px; width: auto; max-width: 100%; height: 40px; vertical-align: middle; font-size: 17px; line-height: 40px; background-color: var(--color-scheme-gray-l1--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 5px; cursor: pointer; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder .DateText_rtl{ position: relative; display: inline-block; margin: 0px; margin-top: 4px; padding: 0px; padding-left: 30px; padding-right: 10px; width: auto; max-width: 100%; height: 40px; vertical-align: middle; font-size: 17px; line-height: 40px; background-color: var(--color-scheme-gray-l1--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 5px; cursor: pointer; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder .DateText:active, #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder .DateText_rtl:active{ background-color: var(--color-scheme-gray-l2--); } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder .DateText::after { content: "▼"; font-size: 10px; color: var(--primary-text-color-dark-gray--); position: absolute; right: 10px; top: 21px; transform: translateY(-50%); pointer-events: none; } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .DateHolder .DateText_rtl::after { content: "▼"; font-size: 10px; color: var(--primary-text-color-dark-gray--); position: absolute; left: 10px; top: 21px; transform: translateY(-50%); pointer-events: none; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer{ height: calc(100% - 52px); border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton{ opacity: 1.0; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView.WithAllDay .WeekView, #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView.WithAllDay .DayView { height: calc(100% - 83px); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .AllDayRow .TimelineSpacer { width: 59px; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .AllDayRow .AllDayEventsHolder { width: calc(100% - 60px); } } @media only screen and (min-width: 781px){ #CalendarView .InnerHolder .CalendarHolder .MobileSidebarMenu{ display: none !important; } } @media only screen and (hover: hover) and (min-width: 781px){ #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .ButtonsHolder .LeftButton:hover{ background-color: var(--color-scheme-gray-l1--); } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .ButtonsHolder .HomeButton:hover{ background-color: var(--color-scheme-gray-l1--); } #CalendarView .InnerHolder .CalendarNavigationBar .NavigationBar .ButtonsHolder .RightButton:hover{ background-color: var(--color-scheme-gray-l1--); } #CalendarView .InnerHolder .Calendar .CalendarItem:hover{ color: var(--color-white--); background-color: var(--color-scheme-blue-l3--); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem:hover{ } #CalendarView .LayoutPickerButton:hover{ background-color: rgba(200, 200, 200, 0.2); } #CalendarView .LayoutPickerButton .Menu .Item:hover{ background-color: var(--color-scheme-gray-l2--); } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem:hover .MenuButton{ opacity: 1.0; } #CalendarView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #CalendarView .InnerHolder .CalendarListsHolder .CalendarList .ListHolder .CalendarItem .MenuButton .Menu .ColorPicker .ColorItem:hover{ opacity: 0.7; } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .Calendar .CalendarMonthItem .Event:hover{ filter: brightness(0.85); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .DayView .DayHolder .Event:hover{ filter: brightness(0.85); } #CalendarView .InnerHolder .CalendarHolder .CalendarContainer .CalendarView .WeekView .Day .Event:hover{ filter: brightness(0.85); } #CalendarView .Event.AllDayEvent:hover{ filter: brightness(0.85); } } /* filename: ../app/css/views/AbsencerequestView.css */ #AbsencerequestView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); } #AbsencerequestView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #AbsencerequestView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #AbsencerequestView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #AbsencerequestView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #AbsencerequestView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #AbsencerequestView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #AbsencerequestView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #AbsencerequestView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #AbsencerequestView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #AbsencerequestView > .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #AbsencerequestView .InnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; max-width: 800px; height: auto; min-height: 100%; text-align: left; background-color: var(--color-scheme-white--); overflow: hidden; } #AbsencerequestView .InnerHolder .ResponseFormHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; text-align: left; background-color: var(--color-scheme-white--); border-top: 1px var(--color-scheme-gray-l1--) solid; border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .MessageHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .MessageHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: middle; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .MessageHolder .Text{ position: relative; display: inline-block; width: calc(100% - 100px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-white--); vertical-align: middle; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; width: auto; max-width: 400px; text-align: start; height: auto; min-height: 100%; } #AbsencerequestView .InnerHolder .ResponseFormHolder .AbsenceResponseForm{ position: relative; display: block; margin: 0 auto; padding: 0px; width: auto; max-width: 400px; text-align: center; height: auto; min-height: 100%; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .FormTitle{ position: relative; display: block; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; padding: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 20px; line-height: 20px; text-align: start; unicode-bidi: plaintext; font-weight: bold; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-gray--) solid; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .FormInfo{ position: relative; display: block; margin: 0 auto; margin-bottom: 20px; padding: 0px; top: 0px; left: 0px; width: 100%; min-height: 30px; height: auto; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; height: 40px; width: 40px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .EmployeeName{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 20px; padding: 5px; width: calc(100% - 10px); height: 44px; vertical-align: middle; font-family: var(--primary-font--); font-size: 18px; line-height: 44px; text-align: left; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-gray-l1--); text-overflow: ellipsis; border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; overflow: hidden; } #AbsencerequestView .InnerHolder .TitleText{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #AbsencerequestView .InnerHolder .ResponseTitleText{ position: relative; display: block; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #AbsencerequestView .InnerHolder .InnerTitle{ position: relative; display: inline-block; width: calc(100% - 100px); height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--color-dark-gray--); vertical-align: middle; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #AbsencerequestView .InnerHolder .TextAreaCounterHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 100px; height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: right; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .InlineTitleText{ display: inline-block !important; margin-bottom: 20px !important; width: calc(100% - 120px) !important; vertical-align: top !important; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .ReqestTypeTitle{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 20px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 182px); height: 40px; vertical-align: top; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .ReqestTypeMenuHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 180px; height: 40px; vertical-align: top; background-color: var(--color-lighter-gray--); border: 1px var(--color-light-gray--) solid; border-radius: 10px; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .ReqestTypeMenuHolder .RequestTypeMenuTitle{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 20px); height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .ReqestTypeMenuHolder .RequestTypeMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; width: 100%; min-height: 80px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); overflow: hidden; cursor: pointer; z-index: 1000; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .ReqestTypeMenuHolder .RequestTypeMenu .MenuItem { position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .ReqestTypeMenuHolder .RequestTypeMenu .MenuItem:last-child { border-bottom: unset } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .DateHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 120px; height: auto; min-height: 40px; text-align: center; vertical-align: top !important; } #AbsencerequestView .InnerHolder textarea{ position: relative; display: block; margin: 0 auto; margin-bottom: 20px; padding: 10px; width: 100%; height: 200px; box-sizing: border-box; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-gray-l1--); border: none; border-radius: 10px; border: 1px var(--color-scheme-gray-l2--) solid; resize: none; } #AbsencerequestView .InnerHolder textarea:focus { background-color: var(--color-scheme-gray-l1--); border-bottom: 1px solid var(--color-scheme-blue-l2--); outline: none; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .AttachmentTitleText{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 40px); height: 40px; vertical-align: middle; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .AddAttachmentButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 40px; vertical-align: middle; background-image: url(/assets/images/icons/attach_file_white.svg); background-position: 7px 7px; background-size: 25px 25px; background-repeat: no-repeat; background-color: var(--primary-brand-color-blue--); border-radius: 10px; cursor: pointer; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .AttachmentsTable{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 30px; padding: 0px; width: 100%; height: auto; min-height: 40px; border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .AttachmentsTable .FileItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .AttachmentsTable .FileItem .FileIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 40px; vertical-align: middle; background-image: url(/assets/images/icons/file_black.svg); background-position: 7px 7px; background-size: 25px 25px; background-repeat: no-repeat; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .AttachmentsTable .FileItem .FileName{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 80px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .AttachmentsTable .FileItem .DownloadableFileName{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 60px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; vertical-align: middle; cursor: pointer; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .AttachmentsTable .NoAttachmentsText{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-gray-l1--); text-overflow: ellipsis; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .FileItem .DeleteButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 40px; vertical-align: middle; background-image: url(/assets/images/icons/delete_black.svg); background-position: 7px 7px; background-size: 25px 25px; background-repeat: no-repeat; background-color: var(--color-scheme-gray-l1--); overflow: hidden; cursor: pointer; } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .FileItem .DeleteButton:hover{ background-color: var(--color-scheme-gray-l2--); } #AbsencerequestView .InnerHolder .ManagerInfoHolder{ position: relative; display: block; margin: 0 auto; margin-bottom: 30px; padding: 6px; height: 44px; width: calc(100% - 20px); text-align: left; background-color: var(--color-scheme-gray-l1--); border-radius: 10px; overflow: hidden; } #AbsencerequestView .InnerHolder .ManagerInfoHolder .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px var(--color-scheme-white--) solid; } #AbsencerequestView .InnerHolder .ManagerInfoHolder .ManagerName{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; width: calc(100% - 54px); height: 44px; vertical-align: middle; font-family: var(--primary-font--); font-size: 18px; line-height: 44px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; border-radius: 10px; overflow: hidden; cursor: pointer; } #AbsencerequestView .InnerHolder .Button{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 30px; padding: 0px; width: 180px; height: 46px; font-family: var(--primary-font--); font-size: 18px; line-height: 46px; text-align: center; color: #ffffff; text-overflow: ellipsis; background-color: var(--primary-brand-color-blue--); border-radius: 26px; transition: 0.2s linear; cursor: pointer; } #AbsencerequestView .InnerHolder .SubmitButton{ margin-top: 0px !important; direction: ltr !important; } #AbsencerequestView .InnerHolder .ApproveButton{ background-color: var(--color-button-green--); margin-left: 10px; margin-right: 10px; width: 150px; display: inline-block; vertical-align: middle; } #AbsencerequestView .InnerHolder .ApproveIcon{ background-image: url(/assets/images/icons/check_white.svg) !important; } #AbsencerequestView .InnerHolder .RejectButton{ background-color: var(--color-button-red--); margin-left: 10px; margin-right: 10px; width: 150px; display: inline-block; vertical-align: middle; } #AbsencerequestView .InnerHolder .RejectIcon{ background-image: url(/assets/images/icons/close_white.svg) !important; } #AbsencerequestView .InnerHolder .Button .Title { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 90px; height: 46px; font-size: 18px; line-height: 46px; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: var(--color-white--); vertical-align: top; overflow: hidden; } #AbsencerequestView .InnerHolder .Button .Icon { position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 46px; width: 40px; background-image: url(/assets/images/icons/submit_white.svg); background-position: 10px 10px; background-size: 25px 25px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: pointer; } #AbsencerequestView .InnerHolder .SubmitButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #AbsencerequestView .InnerHolder .ApproveButton:active{ background-color: var(--color-button-dark-green--); } #AbsencerequestView .InnerHolder .RejectButton:active{ background-color: var(--color-button-red--); } #AbsencerequestView .InnerHolder .FormHolder .FormNotFoundHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 300px; height: 300px; text-align: center; } #AbsencerequestView .InnerHolder .FormHolder .FormNotFoundHolder .FormNotFoundIcon{ position: relative; display: block; margin: 0 auto; margin-top: 50px; padding: 0px; width: 160px; height: 170px; background-image: url(/assets/images/icons/file_not_found_black.svg); background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; overflow: hidden; } #AbsencerequestView .InnerHolder .FormHolder .FormNotFoundHolder .FormNotFoundTitle{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: center; color: var(--primary-text-color-dark-gray--); } #AbsencerequestView .InnerHolder .FormHolder .FormNotFoundHolder .FormNotFoundText{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px;; padding: 0px; width: calc(100% - 50px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: center; color: var(--primary-text-color-dark-gray--); } @media only screen and (hover: hover) and (min-width: 781px){ #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .FileItem .DownloadableFileName:hover{ color: var(--primary-text-color-brand-blue--); } #AbsencerequestView .InnerHolder .ManagerInfoHolder .ManagerName:hover{ color: var(--primary-text-color-brand-blue--); } #AbsencerequestView .InnerHolder .SubmitButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } #AbsencerequestView .InnerHolder .ApproveButton:hover{ background-color: var(--color-button-dark-green--); } #AbsencerequestView .InnerHolder .RejectButton:hover{ background-color: var(--color-button-dark-red--); } #AbsencerequestView .InnerHolder .FormHolder .AbsenceRequestForm .ReqestTypeMenuHolder .RequestTypeMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } } @media only screen and (max-width: 780px){ #AbsencerequestView .InnerHolder .AbsenceRequestForm{ padding-left: 10px !important; padding-right: 10px !important; width: calc(100% - 20px) !important; } #AbsencerequestView .InnerHolder .AbsenceResponseForm{ padding-left: 10px !important; padding-right: 10px !important; width: calc(100% - 20px) !important; } } /* filename: ../app/css/views/admin/WebStatsView.css */ #WebstatsView { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: left; background-color: var(--view-background-color--); overflow: hidden; container-name: WebstatsView; container-type: inline-size; } #WebstatsView .Titlebar { position: relative; display: block; height: 50px; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; text-align: left; } #WebstatsView .Titlebar .Icon { display: inline-block; margin: 10px; width: 30px; height: 30px; vertical-align: middle; background-size: cover; } #WebstatsView .Titlebar .Title { display: inline-block; font-family: var(--primary-font--); font-size: 20px; width: calc(100% - 50px); color: #ffffff; text-align: start; vertical-align: middle; } #WebstatsView .InnerHolder { position: relative; display: block; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #WebstatsView .InnerHolder .StatsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; padding: 20px; max-width: 1200px; margin: 0 auto; } #WebstatsView .InnerHolder .StatCard { background: #ffffff; border: 1px solid #e1e4e8; border-radius: 8px; padding: 20px; text-align: left; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; flex-direction: column; min-height: 250px; /* Slightly taller to fit all info */ } #WebstatsView .InnerHolder .StatCard .Label { font-size: 12px; font-weight: 700; color: #586069; text-transform: uppercase; margin-bottom: 5px; } #WebstatsView .InnerHolder .StatCard .StatusDot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: #ccc; transition: background-color 0.5s ease; } #WebstatsView .InnerHolder .StatCard .Value { margin-top: 30px; font-family: var(--primary-font--); font-size: 28px; /* Slightly smaller to save vertical space */ font-weight: 600; color: var(--primary-brand-color-blue--); } #WebstatsView .InnerHolder .StatCard .ChartBox { position: relative; width: 100%; height: 60px; margin-top: 10px; margin-bottom: 10px; } #WebstatsView .InnerHolder .StatCard .ChartBox canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } #WebstatsView .InnerHolder .StatCard .Subtext { margin-top: 30px; font-size: 13px; color: #6a737d; margin-bottom: 10px; font-weight: 500; } #WebstatsView .InnerHolder .StatCard .ProgressContainer { background: #f1f1f1; height: 8px; border-radius: 4px; width: 100%; overflow: hidden; margin-top: auto; /* Keeps it at the very bottom */ } #WebstatsView .InnerHolder .StatCard .ProgressBar { height: 100%; background-color: var(--primary-brand-color-light-blue--); transition: width 0.5s ease; } @media only screen and (max-width: 700px) { #WebstatsView .Titlebar .Title{ width: calc(100% - 90px); } } /* filename: ../app/css/views/admin/CookieManagementView.css */ #CookiemanagementView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; text-align: center; background-color: #ffffff; overflow: hidden; } #CookiemanagementView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #CookiemanagementView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #CookiemanagementView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #CookiemanagementView #InnerHolder{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: calc(100% - 50px); text-align: center; overflow-x: hidden; overflow-y: auto; direction: ltr; } #CookiemanagementView .TableTitle{ position: relative; display: inline-block; top: 0px; left: 0px; padding-top: 10px; padding-bottom: 10px; margin-top: 30px; width: calc(80% + 50px); height: 50px; font-family: var(--primary-font--); font-size: 24px; line-height: 40px; text-align: left; color: var(--primary-text-color-dark-gray--); } #CookiemanagementView .Table{ position: relative; display: inline-block; top: 0px; left: 0px; padding: 30px; padding-top: 0px; width: 80%; height: 340px; text-align: left; background-color: #ffffff; border-radius: 10px; border: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ overflow: hidden; } #CookiemanagementView .Table:last-child{ margin-bottom: 60px; } #CookiemanagementView .TableHeader{ position: relative; display: block; top: 0px; left: 0px; padding: 10px; padding-left: 0px; margin: 0px; height: 30px; width: calc(100% - 10px); font-weight: bolder; border-bottom: 1px var(--primary-brand-color-blue--) solid; } #CookiemanagementView .TableContent{ position: relative; display: block; top: 0px; left: 0px; padding: 0px; margin: 0px; height: calc(100% - 30px); width: 100%; overflow-x: hidden; overflow-y: auto; } #CookiemanagementView .TableHeader .HeaderItem{ position: relative; display: inline-block; width: 20%; height: 100%; font-size: 20px; line-height: 26px; text-align: left; vertical-align: middle; color: var(--primary-brand-color-blue--); } #CookiemanagementView .TableHeader .HeaderItem:first-child{ width: 50px; } #CookiemanagementView .TableHeader .HeaderItem:last-child{ width: calc(80% - 65px); } #CookiemanagementView .Table .TableRow{ position: relative; display: block; top: 0px; left: 0px; padding: 10px; padding-top: 20px; padding-bottom: 20px; margin: 0px; width: 100%; min-height: 20px; font-size: 16px; line-height: 20px; text-align: left; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #CookiemanagementView .Table .TableRow .ItemOverlay{ position: absolute; display: block; top: 0px; left: 0px; padding: 0px; margin: 0px; margin-top: 5px; width: 100%; height: calc(100% - 10px); background-color: rgba(230,240,249,0.8); opacity: 0.0; transition: 0.3s; text-align: center; overflow: hidden; } #CookiemanagementView .Table .TableRow .ItemOverlay:hover{ opacity: 1.0; } #CookiemanagementView .Table .TableRow .ItemOverlay .EditButton{ position: absolute; display: block; top: calc(50% - 23px); left: calc(50% + 10px); padding: 0px; margin: 0px; width: 46px; height: 46px; background-image:url('assets/images/icons/edit.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 8px 8px; background-color: #ffffff; border-radius: 23px; overflow: hidden; cursor: pointer; transition: 0.3s; } #CookiemanagementView .Table .TableRow .ItemOverlay .EditButton:hover{ background-color: var(--primary-brand-color-blue--); } #CookiemanagementView .Table .TableRow .ItemOverlay .DeleteButton{ position: absolute; display: block; top: calc(50% - 23px); left: calc(50% - 60px); padding: 0px; margin: 0px; width: 46px; height: 46px; background-image:url('assets/images/icons/delete.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 8px 8px; background-color: #ffffff; border-radius: 23px; overflow: hidden; cursor: pointer; transition: 0.3s; } #CookiemanagementView .Table .TableRow .ItemOverlay .DeleteButton:hover{ background-color: var(--primary-brand-color-blue--); } #CookiemanagementView .Table .RowItem{ position: relative; display: inline-block; top: 0px; left: 0px; padding: 0px; margin: 0px; min-height: 100%; width: 20%; vertical-align: middle; word-break: break-word; overflow-x: hidden; overflow-y: auto; } #CookiemanagementView .Table .RowItem:first-child{ width: 50px; } #CookiemanagementView .Table .RowItem:nth-child(3){ width: calc(80% - 70px); font-weight: normal; } #CookiemanagementView .Table .TableRow input[type=text]{ position: relative; display: inline-block; width: 20%; height: 100%; padding: 12px 20px; box-sizing: border-box; font-size: 16px; line-height: 20px; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; vertical-align: middle; } #CookiemanagementView .Table .TableRow input[type=text]:focus { background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } #CookiemanagementView .Table .TableRow textarea{ position: relative; display: inline-block; width: calc(70% - 165px); height: 100%; padding: 12px 20px; margin-left: 10px; box-sizing: border-box; font-size: 16px; line-height: 20px; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; vertical-align: middle; } #CookiemanagementView .Table .TableRow textarea:focus { background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } #CookiemanagementView .Table .TableRow .Button{ position: relative; display: inline-block; width: 80px; height: 50px; margin-left: 10px; font-size: 16px; line-height: 50px; color: #ffffff; background-color: var(--primary-brand-color-blue--); border-radius: 25px; text-align: center; vertical-align: middle; cursor:pointer; } #CookiemanagementView .Table .TableRow .Button:hover{ background-color: var(--primary-brand-color-dark-blue--); } @media only screen and (max-width: 700px) { #CookiemanagementView .Titlebar .Title{ width: calc(100% - 90px); } } /* filename: ../app/css/views/CalendareditorView.css */ #CalendareditorView { position: relative; display: block; margin: 0 auto; width: 100%; height: 100%; text-align: center; overflow: hidden; container-name: CalendareditorView; container-type: inline-size; text-align: left; } #CalendareditorView .Titlebar { position: relative; display: block; margin: 0 auto; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #CalendareditorView .Titlebar .Icon { position: relative; display: inline-block; margin: 10px; width: 30px; height: 30px; vertical-align: middle; background-size: cover; background-repeat: no-repeat; } #CalendareditorView .Titlebar .Title { position: relative; display: inline-block; margin-top: 10px; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CalendareditorView .Titlebar .TitleMenuButton { position: relative; display: inline-block; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; background-position: center; cursor: pointer; } #CalendareditorView .Titlebar .TitleMenuButton .TitleBarMenu { position: absolute; display: none; top: 53px; left: -180px; width: 200px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); z-index: 1000; } /* --- FORM LAYERS --- */ #CalendareditorView .InnerHolder { position: relative; display: block; width: 100%; height: calc(100% - 53px); text-align: left; overflow-x: hidden; overflow-y: auto; } #CalendareditorView .InnerHolder .FormHolder { position: relative; display: block; margin: 0 auto; max-width: 800px; min-height: 100%; background-color: var(--color-scheme-white--); } #CalendareditorView .InnerHolder .FormHolder .EventForm { position: relative; display: block; margin: 0 auto; padding: 10px; width: calc(100% - 20px); max-width: 600px; min-height: 100%; } #CalendareditorView .InnerHolder .FormHolder .EventForm .Title { position: relative; display: inline-block; width: calc(100% - 142px); height: 50px; font-family: var(--primary-font--); font-size: 20px; line-height: 50px; font-weight: bold; color: var(--primary-text-color-dark-gray--); text-align: start; unicode-bidi: plaintext; } #CalendareditorView .InnerHolder .FormHolder .EventForm .InputTitle { position: relative; display: inline-block; width: calc(100% - 142px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); vertical-align: middle; } #CalendareditorView .InnerHolder .FormHolder .EventForm .InputTitle.Bold { font-weight: bold; } #CalendareditorView .InnerHolder .FormHolder .EventForm > input[type=text], #CalendareditorView .InnerHolder .FormHolder .EventForm .DescriptionInput { position: relative; display: block; padding: 10px; margin-bottom: 20px; width: 100%; max-width: 600px; font-family: var(--primary-font--); font-size: 16px; text-align: inherit; unicode-bidi: plaintext; box-sizing: border-box; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; outline: none; transition: 0.2s; } #CalendareditorView .InnerHolder .FormHolder .EventForm > input[type=text] { height: 50px; line-height: 50px; } #CalendareditorView .InnerHolder .FormHolder .EventForm .DescriptionInput { height: 120px; line-height: 20px; resize: none; } #CalendareditorView .InnerHolder .FormHolder .EventForm > input[type=text]:focus, #CalendareditorView .InnerHolder .FormHolder .EventForm .DescriptionInput:focus { border-color: var(--primary-brand-color-blue--); background-color: #e8e8e8; } #CalendareditorView .InnerHolder .FormHolder .EventForm .CheckboxRow { position: relative; display: block; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 50px; margin-bottom: 20px; background-color: var(--color-scheme-gray-l1--); border-radius: 10px; } #CalendareditorView .InnerHolder .FormHolder .EventForm .CheckboxRow .CheckboxTitle { position: relative; display: inline-block; margin: 0px; padding: 0px; width: calc(100% - 38px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: top; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CalendareditorView .InnerHolder .FormHolder .EventForm .CheckboxRow .Checkbox { position: relative; display: inline-block; margin: 10px; padding: 0px; top: 10px; vertical-align: middle; cursor: pointer; } #CalendareditorView .InviteesHolder { position: relative; display: none; margin: 0 auto; padding: 10px; width: calc(100% - 22px); background-color: var(--color-scheme-gray-l0--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 5px; } #CalendareditorView .InviteRow { position: relative; display: inline-block; width: 100%; height: 40px; overflow: hidden; } #CalendareditorView .InviteRow.Underlined { border-bottom: 1px var(--color-scheme-gray-l2--) solid; padding-bottom: 7px; } #CalendareditorView .InviteRow.WithMargin { margin-bottom: 10px; } #CalendareditorView .ExpandInviteButton { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 140px; height: 20px; font-family: var(--primary-font--); font-size: 14px; color: var(--primary-text-color-dark-gray--); text-align: center; line-height: 20px; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; cursor: pointer; vertical-align: middle; transition: 0.2s; } #CalendareditorView .InviteButton { position: relative; display: inline-block; width: 140px; height: 20px; font-family: var(--primary-font--); font-size: 14px; text-align: center; line-height: 20px; background-color: var(--color-scheme-white--); background-image: url(/assets/images/icons/share_black.svg); background-repeat: no-repeat; background-position: 116px center; background-size: 16px; border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; cursor: pointer; vertical-align: middle; transition: 0.2s; } /* --- TABLE STYLING --- */ #CalendareditorView .InnerHolder .FormHolder .EventForm .InviteesHolder .ShareTable { position: relative; display: block; margin: 0 auto; width: calc(100% - 2px); min-height: 40px; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l1--) solid; margin-bottom: 15px; } #CalendareditorView .InnerHolder .FormHolder .EventForm .InviteesHolder .ShareTable .Item { position: relative; display: block; height: 40px; width: 100%; border-bottom: 1px var(--color-scheme-gray-l1--) solid; } #CalendareditorView .InnerHolder .FormHolder .EventForm .InviteesHolder .ShareTable .Item .ProfilePicture { position: relative; display: inline-block; margin: 3px 5px; height: 30px; width: 30px; border-radius: 40px; border: 2px #ffffff solid; background-size: contain; vertical-align: top; } #CalendareditorView .InnerHolder .FormHolder .EventForm .InviteesHolder .ShareTable .Item > .Name { position: relative; display: inline-block; margin: 0px 5px; width: calc(100% - 100px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: inherit; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @media only screen and (hover: hover) { #CalendareditorView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem:hover { background-color: var(--color-lighter-gray--); } #CalendareditorView .ExpandInviteButton:hover, #CalendareditorView .InviteButton:hover { background-color: var(--color-scheme-gray-l1--); } } @container CalendareditorView (width < 800px) { #CalendareditorView .InnerHolder .FormHolder .EventForm { width: calc(100% - 20px); max-width: unset; } } /* RTL OVERRIDES */ #CalendareditorView.rtl .Titlebar, #CalendareditorView.rtl .InnerHolder, #CalendareditorView.rtl .ShareTable .Item .Name, #CalendareditorView.rtl .CheckboxRow .CheckboxTitle { text-align: right; } #CalendareditorView.rtl .InviteButton { background-position: 10px center; } /* filename: ../app/css/views/EventsView.css */ #EventsView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; background-color: var(--view-background-color--); overflow: hidden; } #EventsView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #EventsView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #EventsView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #EventsView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: center; background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } /* filename: ../app/css/views/NewchatView.css */ #NewchatView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--color-lighter-gray--); } #NewchatView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #NewchatView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 2px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #NewchatView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #NewchatView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #NewchatView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #NewchatView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #NewchatView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #NewchatView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #NewchatView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #NewchatView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-white--); overflow: hidden; } #NewchatView .NewGroupInnerHolder{ position: relative; display: none; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-white--); overflow: hidden; } #NewchatView .InnerHolder .CreateGroupButton{ position: relative; display: block; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #NewchatView .InnerHolder .CreateGroupButton:hover{ background-color: var(--color-lighter-gray--); } #NewchatView .InnerHolder .CreateGroupButton .CreateGroupButtonIcon{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: 8px 8px; background-size: 26px 26px; vertical-align: middle; overflow: hidden; } #NewchatView .InnerHolder .CreateGroupButton .CreateGroupButtonTitle{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: calc(100% - 70px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #NewchatView .InnerHolder .CreateGroupButton:active{ background-color: var(--color-light-gray--); } #NewchatView .InnerHolder .CreateExternalInviteButton{ position: relative; display: block; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #NewchatView .InnerHolder .CreateExternalInviteButton:hover{ background-color: var(--color-lighter-gray--); } #NewchatView .InnerHolder .CreateExternalInviteButton .CreateExternalInviteButtonIcon{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: 8px 8px; background-size: 26px 26px; vertical-align: middle; overflow: hidden; } #NewchatView .InnerHolder .CreateExternalInviteButton .CreateExternalInviteButtonTitle{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: calc(100% - 70px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #NewchatView .InnerHolder .CreateExternalInviteButton:active{ background-color: var(--color-light-gray--); } #NewchatView .InnerHolder .CreateNewGroupOrText{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 280px; height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: center; color: var(--color-dark-gray--); overflow: hidden; } #NewchatView .UserListTable{ position: relative; display: block; margin: 0 auto; top: 0px; left: 0px; width: 100%; height: calc(100% - 140px); overflow: hidden; } #NewchatView .UserListTableNewGroup{ height: calc(100% - 190px) !important; border-bottom: 1px var(--color-border-gray--) solid; } #NewchatView .UserListTable .SearchBar{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; text-align: center; overflow: hidden; background-color: var(--primary-brand-color-blue--); } #NewchatView .UserListTable .SearchBar .UserListIcon{ position: relative; display: inline-block; margin: 5px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-image: url('/assets/images/icons/user_white.svg'); background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #NewchatView .UserListTable .SearchBar .UserListTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 210px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; vertical-align: middle; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); text-overflow: ellipsis; } #NewchatView .UserListTable .SearchBar .SearchField{ position: relative; display: inline-block; margin: 0px; margin-right: 5px; padding: 0px; top: 0px; left: 0px; width: 160px; height: 46px; vertical-align: middle; overflow: hidden; } #NewchatView .UserListTable .SearchBar .SearchField .SearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 8px; left: 15px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #NewchatView .UserListTable .SearchBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 10px; right: 4px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--primary-brand-color-light-blue--); cursor: pointer; } #NewchatView .UserListTable .SearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--primary-brand-color-blue--); } #NewchatView .UserListTable .SearchBar .SearchField input[type=text]{ position: absolute; display: block; margin-left: 10px; margin-right: 10px; padding-left: 35px; padding-right: 38px; top: 5px; left: 0px; width: calc(100% - 10px); height: 36px; box-sizing: border-box; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; border: none; background-color: var(--color-white--); color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 18px; } #NewchatView .UserListTable .SearchBar .SearchField input[type=text]:focus{ outline: none; } #NewchatView .UserListTable .UserListTableUsersHolder{ position: relative; display: block; width: 100%; height: calc(100% - 50px); overflow-x: hidden; overflow-y: auto; } #NewchatView .UserListTable .UserListTableUsersHolder .TableItem{ position: relative; display: block; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #NewchatView .UserListTable .UserListTableUsersHolder .TableItem:hover{ background-color: var(--color-lighter-gray--); } #NewchatView .UserListTable .UserListTableUsersHolder .TableItem .CheckboxHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 50px; height: 50px; vertical-align: middle; pointer-events: none; } #NewchatView .UserListTable .UserListTableUsersHolder .TableItem .CheckboxHolder .Checkbox{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 19px; left: 0px; cursor: pointer; } #NewchatView .UserListTable .UserListTableUsersHolder .TableItem .ProfilePicture{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; width: 40px; height: 40px; background-repeat: no-repeat; background-position: 0px 0px; background-size: 40px 40px; vertical-align: middle; border-radius: 25px; border: 2px var(--color-white--) solid; overflow: hidden; } #NewchatView .UserListTable .UserListTableUsersHolder .TableItem .ItemName{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: calc(100% - 75px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #NewchatView .UserListTable .UserListTableUsersHolder .TableItem .ItemNameWithCheckbox{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: calc(100% - 125px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #NewchatView .UserListTable .UserListTableUsersHolder .TableItem .ItemName_rtl{ text-align: right; } #NewchatView .UserListTable .UserListTableUsersHolder .ItemNameWithCheckbox .ItemName_rtl{ text-align: right; } #NewchatView .NewGroupInnerHolder .NewGroupTitlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--color-white--); border-bottom: 2px var(--color-border-gray--) solid; } #NewchatView .NewGroupInnerHolder .NewGroupTitlebar .BackButton{ position:relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 40px; height: 50px; background-image:url('assets/images/icons/arrow_back_black.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 5px 10px; vertical-align: middle; overflow: hidden; cursor: pointer; } #NewchatView .NewGroupInnerHolder .NewGroupTitlebar .BackButton_rtl{ background-image:url('assets/images/icons/arrow_forward_black.svg') !important; } #NewchatView .NewGroupInnerHolder .NewGroupTitlebar .NewGroupTitlebarText{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 80px); height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; } #NewchatView .NewGroupInnerHolder .NewGroupTitlebar .Space{ position:relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 40px; height: 50px; vertical-align: middle; overflow: hidden; } #NewchatView .NewGroupInnerHolder .NewGroupInfoHolder{ position:relative; display: block; margin: 0px; margin-top:10px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 70px; overflow: hidden; } #NewchatView .NewGroupInnerHolder .NewGroupInfoHolder .GroupPicture{ position: relative; display: inline-block; margin-top: 4px; margin-left: 5px; margin-right: 5px; width: 50px; height: 50px; background-repeat: no-repeat; background-position: 10px 10px; background-size: 30px 30px; vertical-align: middle; border-radius: 28px; background-color: #f0f0f0; border: 2px var(--color-white--) solid; background-image: url('/assets/images/icons/camera_black.svg'); overflow: hidden; cursor: pointer; } #NewchatView .NewGroupInnerHolder .NewGroupInfoHolder input[type=text]{ position: relative; display: inline-block; margin-top: 4px; margin-left: 10px; margin-right: 10px; padding-left: 10px; padding-right: 10px; width: calc(100% - 95px); height: 42px; box-sizing: border-box; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; vertical-align: middle; } #NewchatView .NewGroupInnerHolder .NewGroupInfoHolder input[type=text]:focus{ outline: none; } #NewchatView .NewGroupInnerHolder .CreateGroupButton{ position: relative; display: block; margin: 0 auto; margin-top: 8px; width: calc(100% - 10px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: center; color: var(--color-white--); text-overflow: ellipsis; white-space: nowrap; background-color: var(--primary-brand-color-blue--); border-radius: 25px; overflow: hidden; cursor: pointer; } #NewchatView .NewGroupInnerHolder .CreateGroupButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #NewchatViewPopupViewContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #NewchatViewPopupViewContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } /* filename: ../app/css/views/NotificationsView.css */ #NotificationsView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); } #NotificationsView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #NotificationsView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #NotificationsView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 244px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } .ClearButtonHolder{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; width: 134px; height: 30px; text-align: center; vertical-align: middle; cursor: pointer; } #NotificationsView .Titlebar .ClearAllButton{ position: relative; display: inline-block; top: 0px; left: 0px; padding-left: 15px; padding-right: 15px; max-width: 120px; width: auto; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; unicode-bidi: plaintext; color: #ffffff; text-overflow: ellipsis; border-radius: 16px; background-color: var(--primary-brand-color-dark-blue--); cursor: pointer; opacity: 1.0; } #NotificationsView .Titlebar .ClearAllButtonHidden{ opacity: 0.0; pointer-events: none; } #NotificationsView .Titlebar .ClearAllButton:active{ background-color:var(--primary-brand-color-darkest-blue--); } #NotificationsView .Titlebar .NotificationsButton{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size: 28px 28px; background-repeat: no-repeat; background-position: 0px 2px; cursor: pointer; } #NotificationsView .Titlebar .NotificationsButtonActive{ background-image: url('/assets/images/icons/notifications_active_white.svg'); } #NotificationsView .Titlebar .NotificationsButtonInactive{ background-image: url('/assets/images/icons/notifications_inactive_white.svg'); } #NotificationsView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #NotificationsView .InnerHolder .NotificationsTable{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 100%; max-width: 800px; min-height: 100%; height: auto; text-align: left; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem{ position: relative; display: block; margin: 10px; padding: 0px; width: calc(100% - 20px); max-width: 800px; min-height: 80px; height: auto; text-align: start; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.1)); transform: translateZ(0); overflow: hidden; cursor: default; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 20px; margin-left: 10px; margin-right: 10px; padding: 0px; height: 30px; width: 30px; vertical-align: top; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 17px; border: 2px #ffffff solid; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.1)); overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .Sender{ position: relative; display: inline-block; margin-top: 23px; width: calc(100% - 80px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; font-weight: 600; text-align: inherit; direction: inherit; vertical-align: top; /* color: var(--color-dark-gray--); */ color: var(--primary-brand-color-blue--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .Timestamp{ position: absolute; display: block; bottom: 5px; right: 10px; width: 120px; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: inherit; direction: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .Timestamp_rtl{ right: unset; left: 10px; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .ClearButton{ position: absolute; display: block; top: 5px; right: 5px; width: 100px; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: center; background-color: var(--color-light-gray--); border-radius: 15px; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .ClearButton_rtl{ right: unset; left: 5px; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .ClearButton:active{ background-color: var(--color-heavy-gray--); color: var(--color-white--); } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .Title{ position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; margin-right: 15px; margin-left: 15px; padding: 0px; width: calc(100% - 30px); min-height: 22px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 22px; text-align: inherit; direction: inherit; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .Message{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; margin-right: 15px; margin-left: 15px; margin-bottom: 25px; padding: 0px; width: auto; max-width: calc(100% - 30px); min-height: 22px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 22px; text-align: inherit; direction: inherit; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .EmailIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 24px; height: 24px; background-image: url(/assets/images/icons/envelope_color.svg); background-position: -1px -3px; background-size: 26px 28px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .SpamIcon{ position: relative; display: inline-block; width:20px; height: 22px; background-image: url(/assets/images/icons/mailbox_spam_red.svg); background-position: 0px 0px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .OutsideOfLocationIcon{ position: relative; display: inline-block; top: 0px; width: 34px; height: 30px; background-image: url(/assets/images/icons/globe_location_black.svg); background-position: -2px 0px; background-size: 28px 28px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .NoLocationIcon{ position: relative; display: inline-block; top: 0px; width: 30px; height: 30px; background-image: url(/assets/images/icons/no_location_color.svg); background-position: -2px 0px; background-size: 28px 28px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .AbsenceRequestIcon{ position: relative; display: inline-block; top: 0px; width: 30px; height: 30px; background-image: url(/assets/images/icons/absence_request_color.svg); background-position: -2px -2px; background-size: 28px 28px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .AbsenceRequestApprovedIcon{ position: relative; display: inline-block; top: 0px; width: 30px; height: 30px; background-image: url(/assets/images/icons/absence_request_approved_color.svg); background-position: -2px -2px; background-size: 28px 28px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .AbsenceRequestDeniedIcon{ position: relative; display: inline-block; top: 0px; width: 30px; height: 30px; background-image: url(/assets/images/icons/absence_request_denied_color.svg); background-position: -2px -2px; background-size: 28px 28px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .FormIcon{ position: relative; display: inline-block; top: 0px; width: 30px; height: 30px; background-image: url(/assets/images/icons/form_color.svg); background-position: -3px -3px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .CalendarIcon { position: relative; display: inline-block; margin: 0px auto; padding: 0px; width: 25px; height: 25px; background-image: url(/assets/images/icons/calendar_color.svg); background-position: -2px -2px; background-size: 25px 25px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .Message .ProfilePicture{ position: relative; display: inline-block; top: 0px; width: 30px; height: 30px; background-position: 0px 0px; background-size: 26px 26px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #NotificationsView .InnerHolder .NotificationsTable .EmptyNotificationsItem{ position: absolute; display: block; margin: 0px; padding: 0px; top: calc(50% - 10px); left: 10px; width: calc(100% - 20px); height: auto; min-height: 20px; font-family: var(--primary-font--); color: var(--primary-text-color-gray--); font-size: 16px; line-height: 20px; text-align: center; } @media only screen and (hover: hover) and (min-width: 781px){ #NotificationsView .InnerHolder .NotificationsTable .NotificationItem:hover{ /*background-color: var(--color-lighter-gray--);*/ } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .ClearButton:hover{ background-color: var(--color-heavy-gray--); color: var(--color-white--); cursor: pointer; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .ClickableMessage:hover{ color: var(--primary-brand-color-blue--); cursor: pointer; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .Sender:hover{ color: var(--primary-brand-color-dark-blue--); cursor: pointer; } #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .Sender.NoHover:hover{ color: var(--primary-brand-color-blue--) !important; cursor: unset; } } @media only screen and (max-width: 780px) { #NotificationsView .InnerHolder .NotificationsTable .NotificationItem .Message{ margin-top: 10px; } } /* filename: ../app/css/views/FormreaderView.css */ #FormreaderView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); container-name: FormreaderView; container-type: inline-size; } #FormreaderView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #FormreaderView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #FormreaderView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #FormreaderView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); } #FormreaderView .InnerHolder .MenuBarHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; max-width: 720px; height: 100%; overflow: hidden; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .FormNameHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 138px); height: 40px; vertical-align: middle; text-align: start; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .FormNameHolder .FormNameIcon{ position: relative; display: inline-block; top: 0px; width: 40px; height: 40px; background-image: url(/assets/images/icons/form_file_black.svg); background-position: 0px 3px; background-size: 34px 34px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .FormNameHolder .FormName{ position: relative; display: inline-block; width: auto; min-width: 100px; max-width: calc(100% - 40px); height: 32px; padding: 6px 10px 0px 6px; margin: 0 auto; box-sizing: border-box; font-size: 18px; line-height: 24px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; border: none; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; vertical-align: middle; transition: 0.2s; overflow: hidden; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .FormNameHolder [contenteditable="false"].FormName br { display:none; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .FormNameHolder [contenteditable="false"].FormName * { display:inline; white-space:nowrap; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .SubmitButton{ position: relative; display: inline-block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; padding-left: 5px; padding-right: 5px; top: 0px; width: auto; max-width: 140px; height: 32px; border-radius: 16px; background-color: var(--primary-brand-color-blue--); vertical-align: middle; text-align: center; overflow: hidden; cursor: pointer; transition: 0.2s; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .Hidden{ opacity: 0.0; pointer-events: none; cursor: auto; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .SubmitButton .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 70px; height: 32px; font-size: 16px; line-height: 32px; text-align: right; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; color: var(--color-white--); vertical-align: top; overflow: hidden; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .SubmitButton .Title_rtl{ text-align: left !important; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .SubmitButton .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 32px; width: 40px; background-image: url(/assets/images/icons/submit_white.svg); background-position: 10px 6px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: pointer; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .SubmitButton .Icon_rtl{ transform: rotate(180deg); } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .SubmitButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #FormreaderView .InnerHolder .InfoTextHolder{ position: relative; display: none; margin: 0 auto; margin-bottom: 5px; padding: 0px; padding-top:5px; top: 0px; left: 0px; width: 100%; max-width: 720px; height: auto; min-height: 40px; font-family: var(--primary-font--); color: var(--primary-text-color-gray--); font-size: 16px; line-height: 35px; text-align: center; background-color: var(--color-form-completed-green--); overflow: hidden; } #FormreaderView .InnerHolder .InfoTextHolder .InfoText{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 15px; padding-right: 15px; top: 0px; left: 0px; width: auto; height: auto; min-height: 40px; font-family: var(--primary-font--); color: var(--primary-text-color-gray--); font-size: 16px; line-height: 35px; text-align: center; vertical-align: top; overflow: hidden; } #FormreaderView .InnerHolder .InfoTextHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; margin-top: 3px; padding: 0px; top: 0px; left: 0px; width: 30px; height: 30px; background-image: url(/assets/images/icons/verified_black.svg); background-position: 0px 0px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; } #FormreaderView .InnerHolder .PageHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top:5px; top: 0px; left: 0px; width: 100%; height: calc(100% - 58px); overflow-x: hidden; overflow-y: auto !important; } #FormreaderView .InnerHolder .PageHolder .FormFooterBar{ position: relative; display: block; margin: 0 auto; margin-top: 20px; padding: 0px; width: 100%; height: 55px; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; } #FormreaderView .InnerHolder .PageHolder .SubmitButton{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; width: 180px; height: 46px; font-family: var(--primary-font--); font-size: 18px; line-height: 46px; text-align: center; color: #ffffff; text-overflow: ellipsis; background-color: var(--primary-brand-color-blue--); border-radius: 26px; cursor: pointer; } #FormreaderView .InnerHolder .PageHolder .SubmitButton .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 70px; height: 46px; font-size: 18px; line-height: 46px; text-align: right; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; color: var(--color-white--); vertical-align: top; overflow: hidden; } #FormreaderView .InnerHolder .PageHolder .SubmitButton .Title_rtl{ text-align: left !important; } #FormreaderView .InnerHolder .PageHolder .SubmitButton .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 46px; width: 40px; background-image: url(/assets/images/icons/submit_white.svg); background-position: 10px 10px; background-size: 25px 25px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; cursor: pointer; } #FormreaderView .InnerHolder .PageHolder .SubmitButton .Icon_rtl{ transform: rotate(180deg); } #FormreaderView .InnerHolder .PageHolder .Hidden{ opacity: 0.0; } #FormreaderView .InnerHolder .PageHolder .FooterHidden{ height: 10px; opacity: 0.0; } #FormreaderView .InnerHolder .PageHolder .SubmitButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #FormreaderView .InnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; margin-bottom: 5px; padding: 0px; padding-top: 20px; padding-bottom: 10px; padding-left: 30px; padding-right: 30px; top: 0px; left: 0px; width: 100%; max-width: 660px; height: auto; min-height: calc(100% - 50px); background-color: var(--color-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); } #FormreaderView .InnerHolder .FormHolder .AnonymousFormHeader{ position: relative; display: block; margin: 0 auto; margin-bottom: 5px; width: calc(100% - 20px); height: auto; min-height: 50px; background-color: var(--primary-brand-color-blue--); border: 2px var(--color-white--) solid; border-radius: 15px; border: 1px var(--color-lighter-gray--) solid; } #FormreaderView .InnerHolder .FormHolder .AnonymousFormHeader .AnonymousIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 60px; height: 60px; background-image: url(/assets/images/icons/anonymous_white.svg); background-position: 0px 5px; background-size: 60px 60px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormreaderView .InnerHolder .FormHolder .AnonymousFormHeader .InfoText{ position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px;; padding: 0px; width: calc(100% - 60px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); vertical-align: middle; } #FormreaderView .InnerHolder .FormHolder .FormNotFoundHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 300px; height: 300px; text-align: center; } #FormreaderView .InnerHolder .FormHolder .FormNotFoundHolder .FormNotFoundIcon{ position: relative; display: block; margin: 0 auto; margin-top: 50px; padding: 0px; width: 160px; height: 170px; background-image: url(/assets/images/icons/file_not_found_black.svg); background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; overflow: hidden; } #FormreaderView .InnerHolder .FormHolder .FormNotFoundHolder .FormNotFoundTitle{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: center; color: var(--primary-text-color-dark-gray--); } #FormreaderView .InnerHolder .FormHolder .FormNotFoundHolder .FormNotFoundText{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px;; padding: 0px; width: calc(100% - 50px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; text-align: center; color: var(--primary-text-color-dark-gray--); } @container FormreaderView (max-width: 730px){ #FormreaderView .InnerHolder .FormHolder{ padding-left: 5px; padding-right: 5px; max-width: unset; width: calc(100% - 10px); } } @media only screen and (max-width: 780px) { #FormreaderView .InnerHolder .FormHolder{ padding-left: 5px; padding-right: 5px; max-width: unset; width: calc(100% - 10px); } #FormreaderView .Titlebar .Title{ width: calc(100% - 86px) !important; } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .FormNameHolder{ /*width: calc(100% - 145px);*/ width: calc(100% - 20px); } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .SubmitButton{ display: none; pointer-events: none; /*width: 120px;*/ /*padding-left: 0px;*/ /*padding-right: 0px;*/ } #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .SubmitButton .Title{ display: inline-block; } } @media only screen and (hover: hover) and (min-width: 781px){ #FormreaderView .InnerHolder .MenuBarHolder .MenuBar .SubmitButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } #FormreaderView .InnerHolder .PageHolder .SubmitButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } } /* filename: ../app/css/views/CalendareventeditorView.css */ #CalendareventeditorView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; container-name: CalendareventeditorView; container-type: inline-size; } #CalendareventeditorView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #CalendareventeditorView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #CalendareventeditorView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #CalendareventeditorView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #CalendareventeditorView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #CalendareventeditorView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #CalendareventeditorView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #CalendareventeditorView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendareventeditorView > .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: left; background-color: unset; overflow-x: hidden; overflow-y: auto; } #CalendareventeditorView .InnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: auto; max-width: 800px; height: auto; min-height: 100%; background-color: var(--color-scheme-white--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm{ position: relative; display: block; margin: 0 auto; padding: 10px; width: calc(100% - 20px); max-width: 600px; height: auto; min-height: 1080px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm > .Title{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 20px; line-height: 50px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InputTitle{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown { position: relative; display: block; margin: 0px; margin-bottom: 10px; padding: 0px; width: 100%; max-width: 250px; min-height: 50px; height: auto; cursor: pointer; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersHolder { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 50px; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; cursor: pointer; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersHolder .RemindersIcon { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-image: url('/assets/images/icons/alarm_black.svg'); background-color: var(--color-scheme-gray-l1--); background-size: 30px 30px; background-repeat: no-repeat; background-position: 10px 10px; overflow: hidden; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersHolder .RemindersName { position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-right: 10px; padding-left: 10px; width: calc(100% - 70px); height: 50px; vertical-align: middle; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; color: var(--primary-text-color-dark-gray--); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersMenu { position: relative; display: none; margin: 0 auto; margin-top: 5px; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 205px; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l1--) solid; border-radius: 10px; filter: drop-shadow(rgba(0, 0, 0, 0.4) 2px 2px 1px); transform: translateZ(0px); overflow-x: hidden; overflow-y: auto; cursor: pointer; z-index: 1000; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersMenu .MenuItem { position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 50px; font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersMenu .MenuItem:last-child { border-bottom: unset; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown{ position: relative; display: block; margin: 0px; margin-bottom: 10px; padding: 0px; width: 100%; max-width: 250px; min-height: 50px; height: auto; cursor: pointer; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarsHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 50px; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; overflow: hidden; cursor: pointer; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarsHolder .CalendarIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-image: url('/assets/images/icons/calendar_black.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 10px 10px; overflow: hidden; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarsHolder .CalendarName{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 70px); height: 50px; vertical-align: middle; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; color: var(--primary-text-color-dark-gray--); text-align: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarMenu{ position: relatie; display: none; margin: 0 auto; margin-top: 5px; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 205px; background-color: var(--color-scheme-white--); border-top: 1px var(--color-scheme-gray-l1--) solid; border-bottom: 1px var(--color-scheme-gray-l1--) solid; border-left: 1px var(--color-scheme-gray-l1--) solid; border-right: 1px var(--color-scheme-gray-l1--) solid; border-radius: 10px; filter: drop-shadow(rgba(0, 0, 0, 0.4) 2px 2px 2px); transform: translateZ(0px); overflow-x: hidden; overflow-y: auto; cursor: pointer; z-index: 1000; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarMenu .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarMenu .MenuItem:last-child{ border-bottom: unset; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm > input[type=text]{ position: relative; display: block; padding: 10px; margin-bottom: 20px; width: 100%; max-width: 600px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: inherit; unicode-bidi: plaintext; box-sizing: border-box; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border: none; border-bottom: 1px solid #e0e0e0; border-radius: 10px; outline: none; -webkit-appearance: none; appearance: none; transition: 0.2s; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm > input[type=text]:focus{ border-color: var(--primary-brand-color-blue--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .Date{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; max-width: 260px; min-width: 130px; width: auto; color: var(--primary-text-color-dark-gray--); vertical-align: top; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .Date .InputTitle{ position: relative; display: inline-block; margin: 0 auto; margin-top:10px; padding: 0px; width: 100%; vertical-align: top; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .Date .DateHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 120px; height: auto; min-height: 40px; text-align: center; vertical-align: top !important; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .TimePickerHolder { position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 140px; height: 40px; text-align: center; vertical-align: middle; overflow: visible; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CheckboxRow { position: relative; display: block; margin-top: 20px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); max-width: 230px; height: 50px; margin-bottom: 20px; background-color: var(--color-scheme-gray-l1--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CheckboxRow .CheckboxTitle { position: relative; display: inline-block; margin: 0px; padding: 0px; width: calc(100% - 36px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: top; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CheckboxRow .Checkbox { position: relative; display: inline-block; margin: 10px; padding: 0px; top: 8px; vertical-align: middle; cursor: pointer; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InputTitle.WithCounter{ width: calc(100% - 100px); display: inline-block; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .TextAreaCounterHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 100px; height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: right; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: middle; overflow: hidden; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm textarea{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 20px; padding: 10px; width: 100%; height: 140px; box-sizing: border-box; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-gray-l1--); border: none; border-radius: 10px; border: 1px var(--color-scheme-gray-l2--) solid; resize: none; transition: 0.2s; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm textarea:focus { background-color: var(--color-scheme-gray-l1--); border-bottom: 1px solid var(--color-scheme-blue-l2--); outline: none; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .WeeklyDaysRow { display: flex; justify-content: space-between; margin-top: 10px; margin-bottom: 20px; max-width: 300px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .WeeklyDaysRow .DayCircle { width: 34px; height: 34px; border-radius: 50%; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); font-family: var(--primary-font--); font-size: 14px; line-height: 34px; text-align: center; cursor: pointer; transition: 0.2s linear; border: 1px solid var(--color-scheme-gray-l2--); user-select: none; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .WeeklyDaysRow .DayCircle.Active { background-color: var(--color-scheme-blue-l2--); color: var(--color-scheme-white--); border-color: var(--color-scheme-blue-l2--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .WeeklyDaysRow { display: flex; justify-content: space-between; margin-top: 10px; margin-bottom: 20px; max-width: 300px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .WeeklyDaysRow .DayCircle { width: 34px; height: 34px; border-radius: 50%; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); font-family: var(--primary-font--); font-size: 14px; line-height: 34px; text-align: center; cursor: pointer; transition: 0.2s linear; border: 1px solid var(--color-scheme-gray-l2--); user-select: none; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .WeeklyDaysRow .DayCircle.Active { background-color: var(--color-scheme-blue-l2--); color: var(--color-scheme-white--); border-color: var(--color-scheme-blue-l2--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown { position: relative; display: block; margin: 0px; margin-bottom: 20px; width: 100%; max-width: 250px; min-height: 50px; height: auto; background-color: var(--color-scheme-white--); cursor: pointer; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown::after { content: "▼"; position: absolute; font-size: 10px; color: var(--primary-text-color-dark-gray--); right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown_rtl::after { right: auto; left: 15px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown .RecurrenceName { position: relative; display: block; padding-left: 15px; padding-right: 40px; /* Space for the arrow */ font-family: var(--primary-font--); font-size: 16px; line-height: 50px; color: var(--primary-text-color-dark-gray--); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown .RecurrenceName_rtl { padding-left: 40px; padding-right: 15px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown .RecurrenceMenu { position: relative; display: none; margin: 0 auto; margin-top: 5px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 2px); background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l1--) solid; border-radius: 10px; filter: drop-shadow(rgba(0, 0, 0, 0.4) 2px 2px 1px); z-index: 1100; overflow-y: auto; max-height: 205px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown .RecurrenceMenu_rtl { left: auto; right: 0px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown .RecurrenceMenu .MenuItem { padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: start; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; text-overflow: ellipsis; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown .RecurrenceMenu .MenuItem:hover { background-color: var(--color-scheme-gray-l1--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown .RecurrenceMenu .MenuItem:last-child { border-bottom: none; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceEndRow { position: relative; display: block; margin-top: 10px; margin-bottom: 20px; width: 100%; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceEndRow .DateHolder { position: relative; display: inline-block; width: 120px; vertical-align: middle; text-align: center; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteesHolder{ position: relative; display: none; margin: 0 auto; padding: 10px; width: calc(100% - 22px); height: auto; background-color: var(--color-scheme-gray-l0--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 5px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow { position: relative; display: inline-block; margin: 0px; margin-top: 10px; padding: 0px; width: 100%; height: 50px; overflow: hidden; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow.WithTopMargin { margin-top: 20px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow.WithBottomMargin { margin-bottom: 10px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .Bold { font-weight: bold; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow.Underlined { border-bottom: 1px var(--color-scheme-gray-l2--) solid; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow .InputTitle { position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; padding: 0px; width: calc(100% - 142px); height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; color: var(--primary-text-color-dark-gray--); vertical-align: middle; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow .Title { position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; padding: 0px; width: calc(100% - 102px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; color: var(--primary-text-color-dark-gray--); vertical-align: middle; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow .ExpandInviteButton { position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; padding: 0px; width: 100px; height: 20px; font-family: var(--primary-font--); font-size: 14px; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); text-align: center; line-height: 20px; vertical-align: middle; border-radius: 10px; cursor: pointer; transition: background-color 0.2s; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow .InviteButton { position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; padding: 0px; width: 140px; height: 20px; font-family: var(--primary-font--); font-size: 14px; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); text-align: center; line-height: 20px; background-image: url(/assets/images/icons/share_white.svg); background-repeat: no-repeat; background-position: 116px center; background-size: 16px; border-radius: 10px; vertical-align: middle; cursor: pointer; transition: background-color 0.2s; user-select: none; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow .InviteButton:active { background-color: var(--color-scheme-blue-l1--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .ShareTable { position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 2px); min-height: 40px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; text-align: inherit; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l1--) solid; overflow-x: hidden; overflow-y: auto; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .ShareTable .Item { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; overflow: hidden; border-bottom: 1px var(--color-scheme-gray-l1--) solid; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .ShareTable .Item:last-child { border-bottom: none; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .ShareTable .Item .ProfilePicture { position: relative; display: inline-block; margin: 3px 5px; padding: 0px; height: 30px; width: 30px; vertical-align: top; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .ShareTable .Item .Name { position: relative; display: inline-block; margin: 0px 5px; padding: 0px; width: calc(100% - 100px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: top; text-align: inherit; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .EmailAutocompleteInput{ margin-bottom: 5px; padding-top: 10px; min-height: 40px; height: auto; width: 100%; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .EmailAutocompleteInput .InputHolder { height: auto; min-height: 52px; width: calc(100% - 20px); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .EmailAutocompleteInput .InputHolder .Menu { position: relative; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .EmailAutocompleteInput input{ margin-left: 5px; margin-right: 5px; width: 100%; height: 40px; font-size: 16px; border-radius: 0px; border: 1px var(--color-scheme-gray-l1--) solid; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .EmailAutocompleteInput .EmailItemsHolder { position: relative; display: block; margin: 0 auto; margin-left: 5px; margin-right: 5px; padding: 0px; width: 100%; min-height: 2px; height: auto; white-space: unset; overflow-y: hidden; overflow-x: hidden; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .EmailAutocompleteInput .EmailItemsHolder .EmailItem{ margin-bottom: 10px; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .EmailAutocompleteInput .EmailItemsHolder .EmailItem .Title{ font-size: 16px; } #CalendareventeditorView .ShareSettingsDialogContainer{ position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; text-align: left; overflow: hidden; } @media only screen and (hover: hover) and (min-width: 781px){ #CalendareventeditorView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersMenu .MenuItem:hover { background-color: var(--color-lighter-gray--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow .InviteButton:hover { background-color: var(--color-scheme-blue-l1--); } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .InviteRow .ExpandInviteButton:hover { background-color: var(--color-scheme-blue-l1--); } } @container CalendareventeditorView (width < 800px){ #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RecurrenceSelectionDropdown{ max-width: unset; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown { max-width: unset; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown{ max-width: unset; } #CalendareventeditorView .InnerHolder .FormHolder .EventForm{ min-height: 1200px; } } /* filename: ../app/css/views/FormsView.css */ #FormsView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: FormsView; container-type: inline-size; } #FormsView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; margin-bottom: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #FormsView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #FormsView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #FormsView .Titlebar .TitleDynamicText{ position: relative; display: none; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: auto; height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #FormsView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; opacity: 1.0; } #FormsView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -170px; width: 190px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #FormsView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #FormsView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #FormsView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #FormsView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: center; background-color: var(--inner-holder-background-color--); overflow: hidden; } #FormsViewTabBar{ position: relative; display: block; margin: 0 auto; margin-top: 10px; top: 0px; width: calc(100% - 14px); height: 50px; text-align: left; } #FormsViewTabBar .TabBarMenuItem{ position: relative; display: inline-block; margin: 0px; margin-left: 2px; margin-right: 2px; padding: 0px; top: 0px; left: 0px; text-align: center; height: 48px; width: auto; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-top: 1px var(--color-light-gray--) solid; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #ffffff; cursor: pointer; } #FormsViewTabBar .TabBarMenuItem.selected{ background-color: var(--primary-brand-color-blue--); } #FormsViewTabBar .TabBarMenuItemIcon{ position: relative; display: inline-block; margin-right: 10px; margin-left: 10px; top: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #FormsViewTabBar .TabBarMenuItemTitle{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: auto; height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: left; vertical-align: middle; color: var(--primary-text-color-gray-); text-overflow: ellipsis; } #FormsViewTabBar .TabBarMenuItem.selected .TabBarMenuItemTitle{ color: var(--primary-text-color-white--); } #FormsViewContainer{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 22px); height: calc(100% - 71px); background-color: var(--color-scheme-white--); filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } #FormsView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; padding: 5px; padding: 5px; padding-top: 5px; top: 0px; left: 0px; width: calc(100% - 10px); height: 50px; text-align: left; /*border-bottom: 1px var(--primary-brand-color-blue--) solid;*/ border-bottom: 1px var(--color-light-gray--) solid; } #FormsView .Searchbar .SearchBarHolder{ position: relative; display: block; margin: 0px; margin-top: 5px; padding: 0px; text-align: center; width: 100%; height: 40px; } #FormsView .Searchbar .SearchBarHolder .SearchField{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-left: 10px; margin-right: 10px; width: 240px; height: 40px; vertical-align: middle; } #FormsView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #FormsView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 36px; padding-right: 36px; width: 240px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; } #FormsView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #FormsView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #FormsView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #FormsView .Searchbar .SearchBarHolder .FilterControlsHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; width: 250px; height: 40px; vertical-align: middle; } #FormsView .Searchbar .SearchBarHolder .FilterControlsHidden{ opacity: 0.0; pointer-events: none; } #FormsView .Searchbar .SearchBarHolder .FilterControlsHolder .Title{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; max-width: 110px; min-width: 50px; width: auto; height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView .Searchbar .SearchBarHolder .FilterControlsHolder .Button{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; padding-left: 10px; padding-right: 10px; width: 100px; height: 40px; background-color: var(--primary-brand-color-blue--); /*border-bottom: 1px var(--primary-brand-color-blue--) solid;*/ vertical-align: middle; border-radius: 20px; cursor: pointer; } #FormsView .Searchbar .SearchBarHolder .FilterControlsHolder .Button:active{ background-color: var(--primary-brand-color-dark-blue--); } #FormsView .Searchbar .SearchBarHolder .FilterControlsHolder .ButtonTitle{ position: absolute; display: block; padding-left: 10px; padding-right: 10px; width: 100px; height: 40px; top: 0px; lefT: 0px; font-size: 16px; line-height: 40px; text-align: center; text-overflow: ellipsis; color: var(--color-white--); overflow: hidden; } #FormsView .Searchbar .SearchBarHolder .FilterControlsHolder .Menu{ position: absolute; display: none; top: 42px; left: -6px; width: 130px; min-height: 80px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ overflow: hidden; cursor: pointer; z-index: 1000; } #FormsView .Searchbar .SearchBarHolder .FilterControlsHolder .Menu .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #FormsView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 296px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #FormsView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 15px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView .Searchbar .Space{ position: relative; display: inline-block; width: calc(50% - 414px); height: 40px; vertical-align: middle; } #FormsView #FormsViewContainer .FormsViewTableHolder{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: calc(100% - 10px); height: calc(100% - 62px); overflow-x: hidden; overflow-y: auto; } #FormsView #FormsViewContainer .FormsViewTablePaginationHolder{ position: absolute; display: block; bottom: 0px; left: 0px; margin: 0 auto; margin-top:0px; text-align: center; width: 100%; height: 50px; background-color: rgba(255,255,255,0.6); border-top: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 280px; height: 38px; background-color: var(--color-scheme-white--); border-radius: 20px; border: 1px var(--color-scheme-gray-l2--) solid; } #FormsView #FormsViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .PreviousPageButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 36px; height: 36px; background-image: url(/assets/images/icons/arrow_left_black.svg); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; opacity: 0.8; overflow: hidden; cursor: pointer; } #FormsView #FormsViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .PreviousPageButton.PreviousPageButton_rtl{ background-image: url(/assets/images/icons/arrow_right_black.svg); } #FormsView #FormsViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .PageInfoHolder{ position: relative; display: inline-block; padding-left: 15px; padding-right: 15px; width: 178px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; direction: ltr; color: var(--primary-text-color-dark-gray--); vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .NextPageButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 36px; height: 36px; background-image: url(/assets/images/icons/arrow_right_black.svg); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; opacity: 0.8; overflow: hidden; cursor: pointer; } #FormsView #FormsViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .NextPageButton.NextPageButton_rtl{ background-image: url(/assets/images/icons/arrow_left_black.svg); } #FormsView #FormsViewContainer .FormsViewTableHolder .Unclickable{ cursor: unset !important; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem{ position: relative; display: block; top: 0px; left: 0px; margin:0 auto; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem:last-child{ margin-bottom: 49px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .Clickable{ cursor: pointer; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormNoIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url('/assets/images/icons/form_file_black.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .PublishedFormIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url('/assets/images/icons/form_file_published.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .SubmittedFormIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url('/assets/images/icons/submit_form_black.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .AssigneFormIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url('/assets/images/icons/form_assigned_black.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .SharedFormIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url('/assets/images/icons/shared_form_black.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 50px; width: 40px; vertical-align: middle; background-position: 10px 5px; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MenuButton .TableItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 48px; left: -174px; width: 190px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MenuButton .TableItemMenu_rtl { left: 0px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MenuButton .TableItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MenuButton .TableItemMenu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MenuButton .TableItemMenu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormTemplateIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url('/assets/images/icons/form_template_black.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormName{ position: relative; display: inline-block; top: 0px; width: calc(100% - 822px); /*min-width: 200px;*/ height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .LongFormName{ position: relative; display: inline-block; top: 0px; width: calc(100% - 632px); /*min-width: 200px;*/ height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MyFormsFormName{ position: relative; display: inline-block; top: 0px; width: calc(100% - 722px); height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .TableItemHolder{ position: relative; display: inline-block; top: 0px; width: auto; height: 50px; vertical-align: top; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .TableItemHolder .TableItemTitle{ position: relative; display: none; top: 0px; left: 0px; margin: 0 auto; margin-top: 2px; padding: 0px; width: calc(100% - 20px); height: 25px; font-family: var(--primary-font--); font-size: 14px; line-height: 25px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .CreationTimeIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url(/assets/images/icons/form_due_time_black.svg); background-position: 12px 12px; background-size: 24px 24px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .PublishedTimeIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url(/assets/images/icons/form_due_time_black.svg); background-position: 12px 12px; background-size: 24px 24px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .CompletionTimeIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url(/assets/images/icons/form_completion_time_black.svg); background-position: 12px 12px; background-size: 24px 24px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .Time{ position: relative; display: inline-block; top: 0px; width: 160px; height: 50px; font-size: 16px; line-height: 50px; text-align: start; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .Username{ position: relative; display: inline-block; top: 0px; width: 170px; height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .ProfilePicture{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 30px; height: 30px; background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; vertical-align: middle; border-radius: 20px; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .Status{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 110px; height: 50px; font-size: 16px; line-height: 50px; text-align: center; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .StatusTitle{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 110px; height: 30px; font-size: 16px; line-height: 30px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; vertical-align: middle; border-radius: 10px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormType{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 160px; height: 50px; font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormTypeTitle{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 160px; height: 30px; font-size: 16px; line-height: 30px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; vertical-align: middle; border-radius: 10px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormEmptyTableItem{ position: relative; display: block; /*top: 0px;*/ top: calc(50% - 50px); left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; /*border-bottom: 1px var(--color-light-gray--) solid;*/ } #FormsViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #FormsViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @container FormsView (width < 1120px){ #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormName{ width: calc(100% - 822px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .Time{ width: 160px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .LongFormName{ width: calc(100% - 632px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MyFormsFormName{ width: calc(100% - 722px); } } @container FormsView (width < 1040px){ #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .LongFormName{ width: calc(100% - 632px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MyFormsFormName{ width: calc(100% - 722px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormName{ width: calc(100% - 662px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .CompletionTimeIcon{ opacity: 0.0; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .CompletionTime{ display: none; } } @container FormsView (width < 880px){ #FormsView #FormsViewContainer .Searchbar .SearchBarHolder .Space{ width: calc(50% - 370px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormName{ width: calc(100% - 442px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .LongFormName{ width: calc(100% - 410px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MyFormsFormName{ width: calc(100% - 542px); } #FormsView .Searchbar .SearchBarHolder .SearchField { width: 200px; } #FormsView .Searchbar .SearchField input[type=text] { width: 200px; } /**/ #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormType{ display: none; } #FormsView #FormsViewContainer .Searchbar .SearchBarHolder .FilterControlsHolder{ width: 200px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .AssignedTo{ display: none; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .AssignedBy{ display: none; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .CreatedBy{ display: none; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .ProfilePicture{ display: none; } } @container FormsView (width <= 780px){ #FormsView #FormsViewContainer .Searchbar .SearchBarHolder .FilterControlsHolder{ width: 110px; } #FormsView #FormsViewContainer .Searchbar .SearchBarHolder .FilterControlsHolder .Title{ display: none; } #FormsView #FormsViewContainer .Searchbar .SearchBarHolder .Space{ width: calc(50% - 324px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem { /*margin-top: 5px;*/ /*margin-bottom: 5px;*/ } } @container FormsView (width < 720px){ #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormName{ width: calc(100% - 442px); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormIcon { margin-left: 0px; margin-right: 0px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .PublishedFormIcon{ margin-left: 0px; margin-right: 0px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .SubmittedFormIcon{ margin-left: 0px; margin-right: 0px; } } @media only screen and (max-width: 780px) { #FormsViewTabBar .TabBarMenuItemTitle{ position: relative; display: none; } #FormsViewTabBar .TabBarMenuItemIcon{ margin-top: 8px; } #FormsView .Titlebar .TitleDynamicText{ display: inline-block; } #FormsView #FormsViewContainer{ width: 100%; height: calc(100% - 60px); } #FormsView #FormsViewContainer .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #FormsView #FormsViewContainer .Searchbar .SearchBarHolder .Space{ width: calc(50% - 172px) !important; } #FormsView #FormsViewContainer .FormsViewTableHolder{ width: 100%; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem:last-child{ margin-bottom: 53px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormIcon { position: relative; display: inline-block; top: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; background-color: var(--color-white--); overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormTemplateIcon { position: relative; display: inline-block; top: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; background-color: var(--color-white--); overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .PublishedFormIcon{ position: relative; display: inline-block; top: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; background-color: var(--color-white--); overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .SubmittedFormIcon{ position: relative; display: inline-block; top: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; background-color: var(--color-white--); overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .AssigneFormIcon{ position: relative; display: inline-block; top: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; background-image: url('/assets/images/icons/form_assigned_black.svg'); vertical-align: middle; background-color: var(--color-white--); overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .SharedFormIcon{ position: relative; display: inline-block; top: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; background-image: url('/assets/images/icons/shared_form_black.svg'); vertical-align: middle; background-color: var(--color-white--); overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableFieldNames{ display: none; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormName{ width: calc(100% - 40px) !important; background-color: var(--color-white--); } #FormsView #FormsViewContainer .FormsViewTableHolder .AssignedToMe .CreationTimeIcon { display: none !important; opacity: 0.0; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .LongFormName{ width: calc(100% - 80px) !important; background-color: var(--color-white--); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MyFormsFormName{ width: calc(100% - 80px) !important; background-color: var(--color-white--); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .LastModified { display: none; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .Status{ display: none; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .StatusButton { display: none; } #FormsView #FormsViewContainer .FormsViewTableHolder .AssignedToMe .CreationTime{ display: none; } #FormsView #FormsViewContainer .FormsViewTableHolder .AssignedToMe .FormNoIcon{ display: none; } #FormsView #FormsViewContainer .Searchbar .SearchBarHolder .FilterControlsHolder { width: 120px; margin-left: 0px; margin-right: 0px; } .SearchFieldOnly .Space{ display: none !important; } .SearchFieldOnly .FilterControlsHolder{ display: none !important; } #FormsView .Searchbar .SearchBarHolder .SearchField { width: 170px; margin-left: 0px; margin-right: 0px; } .SearchFieldOnly .SearchField { width: calc(100% - 10px) !important; } #FormsView .Searchbar .SearchField input[type=text] { width: 100% !important; } #FormsView #FormsViewContainer .Searchbar .SearchBarHolder .Space { width: calc(50% - 150px) !important; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem { border: 1px var(--color-light-gray--) solid; margin-top: 5px; height: 172px; width: calc(100% - 10px); line-height: 0px; border: 1px var(--color-light-gray--) solid; background-color: var(--color-superlight-gray--); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .TableItemHolder{ width: 50%; height: 60px; overflow: hidden; border-top: 1px var(--color-lighter-gray--) solid; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .TableItemHolder .TableItemTitle{ display: block; } #FormsView #FormsViewContainer .FormsViewTableHolder .AssignedToMe .PublishedTimeIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; height: 30px; width: 20px; vertical-align: top; background-position: 0px 5px; background-repeat: no-repeat; background-size: 20px 20px; opacity: 1.0; } #FormsView #FormsViewContainer .FormsViewTableHolder .AssignedToMe .PublishedTime{ display: inline-block; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .CompletionTimeIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; height: 30px; width: 20px; vertical-align: top; background-position: 0px 5px; background-repeat: no-repeat; background-size: 20px 20px; opacity: 1.0; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .CompletionTime{ display: inline-block; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .AssignedBy{ display: inline-block; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .Time { position: relative; display: inline-block; margin: 0 auto; margin-top: 1px; padding: 0px; width: calc(100% - 42px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .CreationTime{ width: calc(100% - 42px); padding-left: 10px; padding-right: 10px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .LastModified{ width: calc(100% - 42px); padding-left: 10px; padding-right: 10px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .Username{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-right: 0px; margin-left: 0px; width: calc(100% - 42px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-left: 10px; margin-right: 10px; margin-top: 5px; padding: 0px; top: 0px; height: 20px; width: 20px; vertical-align: top; background-position: 0px 0px; background-repeat: no-repeat; background-size: 20px 20px; border-radius: 10px; overflow: hidden; opacity: 1.0; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .StatusTitle { position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 110px; height: 25px; font-size: 14px; line-height: 25px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; vertical-align: top; border-radius: 10px; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .FormType{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 100%; height: 30px; font-size: 14px; line-height: 30px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MenuButton { position: absolute; display: block; margin: 0px; padding: 0px; top: 0px; left: calc(100% - 40px); height: 50px; width: 40px; background-position: 10px 5px; background-image: url(/assets/images/icons/menu_dots_black.svg); background-repeat: no-repeat; background-size: 20px 40px; background-color: var(--color-white--); cursor: pointer; } #FormsView #FormsViewContainer .FormsViewTableHolder .TableItem_rtl .MenuButton { left: 0px !important; } } @media only screen and (hover: hover) and (min-width: 781px){ #FormsView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #FormsViewTabBar .TabBarMenuItem.selected:hover{ background-color: var(--primary-brand-color-blue--); } #FormsViewTabBar .TabBarMenuItem:hover{ background-color: var(--color-light-gray--); } #FormsView .Searchbar .SearchBarHolder .FilterControlsHolder .Menu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem .MenuButton .TableItemMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem:hover{ background-color: var(--color-lighter-gray--) !important; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem:hover .FormIcon{ background-color: var(--color-lighter-gray--) !important; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem:hover .PublishedFormIcon{ background-color: var(--color-lighter-gray--) !important; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem:hover .SubmittedFormIcon{ background-color: var(--color-lighter-gray--) !important; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem:hover .FormName{ background-color: var(--color-lighter-gray--) !important; } #FormsView #FormsViewContainer .FormsViewTableHolder .FormTableItem:hover .LongFormName{ background-color: var(--color-lighter-gray--) !important; } } /* filename: ../app/css/views/PDFView.css */ #PdfView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; background-color: #ffffff; } #PdfView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #PdfView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #PdfView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #PdfView .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #PdfView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #PdfView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #PdfView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #PdfView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #PdfView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #PdfView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #PdfView .PDFHolder{ position: relative; display: none; top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); overflow: auto; background-color: #ffffff; direction: rtl; } #PdfView .PDFCanvas{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: auto; overflow: hidden; background-color: #ffffff; direction: ltr; } #PdfView .NextButton{ position: absolute; display: none; bottom: 10px; left: calc(50% - 100px); width: 30px; height: 30px; border-radius: 17px; background-color: var(--color-scheme-white--); background-image: url('/assets/images/icons/arrow_back_black.svg'); background-repeat: no-repeat; background-position: 5px 5px; background-size: 20px 20px; border: 2px var(--color-scheme-black--) solid; overflow: hidden; opacity: 0.8; cursor: pointer; } #PdfView .PrevButton{ position: absolute; display: none; bottom: 10px; right: calc(50% - 100px); width: 30px; height: 30px; border-radius: 17px; background-color: var(--color-scheme-white--); background-image: url('/assets/images/icons/arrow_forward_black.svg'); background-repeat: no-repeat; background-position: 5px 5px; background-size: 20px 20px; border: 2px var(--color-scheme-black--) solid; overflow: hidden; opacity: 0.8; cursor: pointer; } #PdfView .PageNumber{ position: absolute; display: none; bottom: 10px; right: calc(50% - 50px); width: 100px; height: 30px; text-align: center; line-height: 30px; font-family: var(--primary-font--); font-size: 16px; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-white--); direction: rtl; border-radius: 17px; border: 2px var(--color-scheme-black--) solid; overflow: hidden; opacity: 0.8; } #PdfView .ZoomOutButton{ position: absolute; display: none; bottom: 80px; right: 12px; width: 30px; height: 30px; border-radius: 17px; background-color: var(--color-scheme-white--); background-image: url('/assets/images/icons/zoom_out_black.svg'); background-repeat: no-repeat; background-position: 5px 5px; background-size: 20px 20px; border: 2px var(--color-scheme-black--) solid; overflow: hidden; opacity: 0.8; cursor: pointer; } #PdfView .ZoomInButton{ position: absolute; display: none; bottom: 160px; right: 12px; width: 30px; height: 30px; border-radius: 17px; background-color: var(--color-scheme-white--); background-image: url('/assets/images/icons/zoom_in_black.svg'); background-repeat: no-repeat; background-position: 5px 5px; background-size: 20px 20px; border: 2px var(--color-scheme-black--) solid; overflow: hidden; opacity: 0.8; cursor: pointer; } #PdfView .Zoom{ position: absolute; display: none; bottom: 120px; right: 7px; width: 40px; height: 30px; text-align: center; line-height: 30px; font-family: var(--primary-font--); overflow: hidden; font-size: 13px; color: var(--primary-text-color-white--); background-color: var(--color-scheme-black--); border-radius: 17px; border: 2px var(--color-scheme-white--) solid; opacity: 0.8; overflow: hidden; } #PdfView .PdfViewLoadingScreen{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: rgba(256, 255, 255, 0.2); overflow: hidden; } @media only screen and (max-width: 780px) { } @media only screen and (hover: hover) and (min-width: 781px){ #PdfView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } } /* filename: ../app/css/views/CreateexternalcallinviteView.css */ #CreateexternalcallinviteView { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); container-name: CreateexternalcallinviteView; container-type: inline-size; } #CreateexternalcallinviteView .Titlebar { position: relative; display: block; top: 0px; left: 0px; margin: 0px !important; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #CreateexternalcallinviteView .Titlebar .Icon { position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size: cover; background-repeat: no-repeat; background-position: 0px 0px; } #CreateexternalcallinviteView .Titlebar .Title { position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #CreateexternalcallinviteView .TitleMenuButton { position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #CreateexternalcallinviteView .TitleBarMenu { position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); z-index: 1000; } #CreateexternalcallinviteView .TitleBarMenu .TitleBarMenuItem { position: relative; display: block; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #CreateexternalcallinviteView .TitleBarMenu .TitleBarMenuItem:hover { background-color: var(--color-lighter-gray--); } #CreateexternalcallinviteView .TitleBarMenu .TitleBarMenuItem .ItemIcon { position: relative; display: inline-block; margin: 10px; width: 30px; height: 30px; vertical-align: middle; background-size: 24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #CreateexternalcallinviteView .TitleBarMenu .TitleBarMenuItem .ItemTitle { position: relative; display: inline-block; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; vertical-align: middle; color: var(--primary-text-color-dark-gray--); } #CreateexternalcallinviteView .InnerHolder { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); text-align: left; overflow-x: hidden; overflow-y: auto; } #CreateexternalcallinviteView .FormHolder { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; max-width: 800px; min-height: 100%; background-color: var(--color-scheme-white--); } #CreateexternalcallinviteView .EventForm { position: relative; display: block; margin: 0 auto; padding: 10px; top:10px; width: calc(100% - 40px); height: auto; text-align: inherit; border-radius: 10px; background-color: var(--color-scheme-gray-l0--); border: 1px var(--color-scheme-gray-l1--) solid; } #CreateexternalcallinviteView .ResultsArea { margin-top: 10px; padding-top: 0px; background-color: var(--color-scheme-gray-l0--); } #CreateexternalcallinviteView .InputTitle { position: relative; display: block; margin: 0px; padding: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; font-weight: bold; color: var(--primary-text-color-dark-gray--); } #CreateexternalcallinviteView .InputTitle.WithButton { width: calc(100% - 100px); display: inline-block; } #CreateexternalcallinviteView .InputTitle .LinkIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 20px; height: 20px; vertical-align: text-top; background-image: url('/assets/images/icons/link_black.svg'); background-size: 16px 16px; background-position: center; background-repeat: no-repeat; overflow: hidden; } #CreateexternalcallinviteView .Date { position: relative; display: inline-block; margin-top: 10px; width: 100%; min-width: 130px; vertical-align: top; text-align: center; } #CreateexternalcallinviteView .DateHolder { position: relative; display: inline-block; width: 120px; height: auto; min-height: 40px; text-align: center; vertical-align: top; } #CreateexternalcallinviteView .TimePickerHolder { position: relative; display: inline-block; width: 140px; height: 40px; text-align: center; vertical-align: middle; } #CreateexternalcallinviteView .LinkDisplayBox { position: relative; display: block; padding: 10px; width: 100%; min-height: 60px; max-height: 120px; box-sizing: border-box; background-color: var(--color-scheme-gray-l1--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; color: var(--primary-text-color-dark-gray--); word-break: break-all; text-align: left; overflow-y: auto; user-select: all !important; -webkit-user-select: all !important; cursor: text; } #CreateexternalcallinviteView .InfoText { width: 100%; margin-top: 10px; font-family: var(--primary-font--); font-size: 13px; line-height: 20px; color: var(--color-red--); text-align: start; height: 40px; } #CreateexternalcallinviteView .InviteButton { position: relative; display: block; margin: 0 auto; margin-top: 30px; padding: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); text-align: center; line-height: 40px; border-radius: 10px; cursor: pointer; transition: background-color 0.2s; user-select: none; background-position: unset; transition: 0.2s linear; } #CreateexternalcallinviteView .CopyButton { position: relative; display: inline-block; margin: 0 auto; margin-bottom: 10px; padding: 0px; width: 100px; height: 20px; font-family: var(--primary-font--); font-size: 14px; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); text-align: center; line-height: 20px; vertical-align: middle; border-radius: 10px; cursor: pointer; transition: background-color 0.2s; transition: 0.2s linear; } #CreateexternalcallinviteView .InviteButton:active { background-color: var(--color-scheme-blue-l1--); } #CreateexternalcallinviteView .EmailAutocompleteInput .EmailItemsHolder { margin-left: 2px !important; margin-right: 2px !important; padding: 0px !important; width: calc(100% - 4px) !important; height: 40px !important; } #CreateexternalcallinviteView .EmailAutocompleteInput{ height: 42px !important; } #CreateexternalcallinviteView .EmailAutocompleteInput .InputHolder { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 2px); height: 40px; vertical-align: top; background-color: var(--color-scheme-gray-l1--) !important; border-radius: 10px !important; border: 1px var(--color-scheme-gray-l2--) solid; } #CreateexternalcallinviteView .EmailAutocompleteInput .InputHolder input[type=text] { margin-top: 7px !important; padding-left: 10px !important; padding-right: 10px !important; width: calc(100% - 20px) !important; background-color: unset; } #CreateexternalcallinviteView .EmailAutocompleteInput .InputHolder .Menu { margin-top: 10px !important; width: 100% !important; min-width: unset !important; max-width: unset !important; } #CreateexternalcallinviteView .EmailAutocompleteInput .EmailItemsHolder .EmailItem{ width: calc(100% - 15px); height: 36px !important; background-color: var(--color-scheme-gray-l1--) !important; border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 5px; } #CreateexternalcallinviteView .EmailAutocompleteInput .EmailItemsHolder .EmailItem .Title { font-size: 16px !important; line-height: 36px; width: calc(100% - 30px); height: 36px; } #CreateexternalcallinviteView .EmailAutocompleteInput .EmailItemsHolder .EmailItem .DeleteButton { margin-top: 8px; } #CreateexternalcallinviteView .InnerHolder .DatePickerMenu{ left: -15px; } #CreateexternalcallinviteView .InnerHolder .TimePickerMenu{ left: -95px; } #CreateexternalcallinviteView .InnerHolder.rtl .DatePickerMenu{ left: -105px; } #CreateexternalcallinviteView .InnerHolder.rtl .TimePickerMenu{ left: -20px; } #CreateexternalcallinviteView .SendEmailButton{ position: relative; display: none; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; padding: 0px; width: calc(100% - 40px); height: 40px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); text-align: center; line-height: 40px; border-radius: 10px; cursor: pointer; transition: background-color 0.2s; user-select: none; background-position: unset; transition: 0.2s linear; } @media only screen and (hover: hover) and (min-width: 781px){ #CreateexternalcallinviteView .EmailAutocompleteInput .EmailItemsHolder .EmailItem:hover{ background-color: var(--color-scheme-gray-l2--); } #CreateexternalcallinviteView .CopyButton:hover{ background-color: var(--color-scheme-blue-l1--); } #CreateexternalcallinviteView .InviteButton:hover{ background-color: var(--color-scheme-blue-l1--); } #CreateexternalcallinviteView .SendEmailButton:hover { background-color: var(--color-scheme-blue-l1--) !important; } } @media only screen and (max-width: 700px) { } /* filename: ../app/css/views/ChatdetailsView.css */ #ChatdetailsView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); } #ChatdetailsView .Titlebar{ position: relative; display: block; margin:0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #ChatdetailsView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #ChatdetailsView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 144px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #ChatdetailsView .Titlebar .NotificationsButton{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 38px; height: 30px; vertical-align: middle; background-size: 28px 28px; background-repeat: no-repeat; background-position: 0px 2px; cursor: pointer; } #ChatdetailsView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #ChatdetailsView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -168px; width: 188px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #ChatdetailsView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #ChatdetailsView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #ChatdetailsView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #ChatdetailsView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #ChatdetailsView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #ChatdetailsView .InnerHolder .DetailsHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; max-width: 800px; min-height: 100%; height: auto; background-color: var(--color-scheme-white--); overflow: hidden; } #ChatdetailsView .InnerHolder .rtl{ text-align: right !important; direction:rtl !important; } #ChatdetailsView .InnerHolder .ChatDetailsGroupPicture{ position: relative; display: block; margin: 0 auto; margin-top:20px; padding: 0px; width: 120px; height: 120px; background-size: contain; background-position: 0px 0px; background-repeat: no-repeat; border-radius: 60px; overflow: hidden; border: 2px var(--color-white--) solid; } #ChatdetailsView .InnerHolder .ChatDetailsTitle{ position: relative; display: block; margin: 0 auto; margin-top: 25px; margin-bottom: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 20px); max-width: 340px; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: center; color: var(--color-light-gray-); text-overflow: ellipsis; overflow: hidden; } .ChatDetailsGroupInfoText{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 20px); max-width: 340px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-light-gray-); text-overflow: ellipsis; overflow: hidden; } .ChatDetailsGroupInfoDetailsText{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 20px); max-width: 340px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-light-gray-); text-overflow: ellipsis; overflow: hidden; } /**/ #ChatdetailsView .InnerHolder .ChatDetailsGroupMediaInfoHolder{ position: relative; display: block; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 20px); max-width: 340px; height: 110px; background-color: var(--color-lighter-gray--); border-radius: 10px; border: 2px var(--color-light-gray--) solid; overflow: hidden; } #ChatdetailsView .InnerHolder .ChatDetailsGroupMediaInfoHolder .ChatDetailsGroupMediaTitleText{ position: relative; display: block; margin: 0 auto; margin-bottom: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 20px); max-width: 340px; height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: center; color: var(--color-dark-gray--); text-overflow: ellipsis; background-color: var(--color-white--); border-bottom: 1px var(--color-white--) solid; overflow: hidden; } #ChatdetailsView .InnerHolder .ChatDetailsGroupMediaInfoHolder .ChatDetailsMediaMenu{ position: relative; display: block; margin: 0 auto; margin-bottom: 30px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 24px); max-width: 340px; height: 50px; border-radius: 26px; text-align: center; } #ChatdetailsView .InnerHolder .ChatDetailsGroupMediaInfoHolder .ChatDetailsMediaMenu .ChatDetailsMediaMenuButton{ position: relative; display: inline-block; margin: 0 auto; margin-top: 3px; margin-left: 4px; margin-right: 4px; padding-left: 8px; padding-right: 8px; top: 0px; left: 0px; max-width: calc(50% - 20px); width: auto; min-width: 130px; height: auto; overflow: hidden; vertical-align: middle; background-color: var(--primary-brand-color-blue--); border: 2px var(--color-white--) solid; border-radius: 20px; cursor: pointer; } #ChatdetailsView .InnerHolder .ChatDetailsGroupMediaInfoHolder .ChatDetailsMediaMenu .ChatDetailsMediaMenuButton .Icon{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; margin-bottom: 5px; margin-left: 2px; margin-right: 2px; padding: 0px; top: 0px; height: 26px; width: 26px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; } #ChatdetailsView .InnerHolder .ChatDetailsGroupMediaInfoHolder .ChatDetailsMediaMenu .ChatDetailsMediaMenuButton .Text{ position: relative; display: inline-block; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; margin-left: 5px; width: calc(100% - 40px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; direction: inherit; vertical-align: middle; color: var(--color-white--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ChatdetailsView .InnerHolder .ChatDetailsGroupMediaInfoHolder .ChatDetailsMediaMenu .ChatDetailsMediaMenuButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } /**/ #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder{ position: relative; display: block; margin: 0 auto; margin-bottom:20px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 20px); max-width: 340px; height: auto; text-align: left; direction: ltr; border: 1px var(--color-light-gray--) solid; border-radius: 10px; overflow: hidden; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; text-align: inherit; direction: inherit; overflow: hidden; background-color: var(--primary-brand-color-blue--); cursor: pointer; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar .ChatDetailsMembersTableTitle{ position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 220px); height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; color: var(--color-white--); text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar .SearchField{ position: relative; display: inline-block; margin: 0px; margin-top: 3px; padding: 0px; width: 160px; height: 50px; text-align: center; vertical-align: top; opacity: 0.0; pointer-events: none; overflow: hidden; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar .SearchField .SearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 8px; left: 5px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 9px; right: 4px; width: 15px; height: 15px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 15px 15px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--primary-brand-color-light-blue--); cursor: pointer; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--primary-brand-color-blue--); } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar .SearchField input[type=text]{ position: absolute; display: block; padding-left: 35px; padding-right: 38px; top: 4px; left: 0px; width: 100%; height: 36px; box-sizing: border-box; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; border: none; background-color: var(--color-white--); color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 18px; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar .SearchField input[type=text]:focus{ outline: none; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar .SearchBarToggleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTableSearchBar .SearchBarToggleButton.Collapse{ transform: rotate(180deg); } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable{ position: relative; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; max-height: 300px; height: auto; min-height: 114px; text-align: inherit; direction: inherit; overflow-x: hidden; overflow-y: auto; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem{ position: relative; display: block; top: 0px; left: 0px; margin:0px; padding: 0px; width: 100%; height: 56px; text-align: inherit; direction: inherit; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ChatDetailsMembersTable .ListItem:last-child{ border-bottom: none; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem:hover{ background-color: var(--color-lighter-gray--) !important; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-top: 5px; margin-bottom: 5px; margin-left: 15px; margin-right: 15px; padding: 0px; top: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px #ffffff solid; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .Name{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; margin-right: 5px; margin-left: 5px; width: calc(100% - 180px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: inherit; direction: inherit; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .IsAdmin{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; margin-right: 5px; margin-left: 5px; padding-left: 3px; padding-right: 3px; width: 50px; height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background-color: var(--primary-brand-color-blue--); color: var(--color-white--); border-radius: 15px; overflow: hidden; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .MenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 30px; vertical-align: middle; background-position: 10px 10px; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-repeat: no-repeat; background-size: 20px 30px; cursor: pointer; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .NoMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 30px; vertical-align: middle; pointer-events: none; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .MenuButton .Menu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 56px; left: -170px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); transform: translateZ(0); z-index: 1000; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .MenuButton .Menu_rtl{ left: 10px !important; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .MenuButton .Menu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .MenuButton .Menu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .MenuButton .Menu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .MenuButton .Menu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .NoMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 30px; vertical-align: middle; } #ChatdetailsView .InnerHolder .ChatDetailsMembersTableHolder .ChatDetailsMembersTable .ListItem .NotAdmin{ position: relative; display: inline-block; margin-top: 10px; margin-bottom: 10px; margin-right: 5px; margin-left: 5px; padding-left: 3px; padding-right: 3px; width: 50px; height: 20px; vertical-align: middle; overflow: hidden; } .ChatdetailsViewFileExplorerContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255,255,255,0.95); overflow: hidden; } .ChatdetailsViewImageGalleryContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; /*background-color: rgba(255,255,255,0.95);*/ background-color: var(--color-lighter-gray--); overflow: hidden; } .ChatdetailsViewFileExplorerContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255,255,255,0.95); overflow: hidden; } .ChatdetailsViewGroupNameEditorContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } .ChatdetailsViewUserPickerDialogContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } /* filename: ../app/css/views/FormtemplatesView.css */ #FormtemplatesView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); container-name: FormtemplatesView; container-type: inline-size; } #FormtemplatesView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; margin-bottom: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #FormtemplatesView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #FormtemplatesView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #FormtemplatesView .Titlebar .TitleDynamicText{ position: relative; display: none; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: auto; height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #FormtemplatesView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; opacity: 1.0; } #FormtemplatesView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #FormtemplatesView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #FormtemplatesView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #FormtemplatesView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #FormtemplatesView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; } #FormtemplatesViewContainer{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 22px); height: calc(100% - 17px); background-color: #ffffff; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } #FormtemplatesView .Searchbar{ position: relative; display: block; margin-left: 5px; margin-right: 5px; padding: 0px; padding-top: 5px; top: 0px; left: 0px; width: calc(100% - 10px); height: 60px; text-align: left; /*border-bottom: 1px var(--primary-brand-color-blue--) solid;*/ border-bottom: 1px var(--color-light-gray--) solid; } #FormtemplatesView .Searchbar .SearchBarHolder{ position: relative; display: block; margin: 0px; margin-top: 8px; padding: 0px; width: 100%; height: 40px; } #FormtemplatesView .Searchbar .SearchBarHolder .SearchField{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; width: 240px; height: 40px; vertical-align: middle; } #FormtemplatesView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #FormtemplatesView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 36px; padding-right: 36px; width: 240px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; } #FormtemplatesView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #FormtemplatesView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #FormtemplatesView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; width: 250px; height: 40px; vertical-align: middle; } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHidden{ display: inline-block; } #FormtemplatesView .Searchbar .SearchBarHolder .Hidden{ opacity: 0.0; } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHolder .Title{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; max-width: 110px; min-width: 50px; width: auto; height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHolder .Button{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 100px; height: 40px; background-color: var(--primary-brand-color-blue--); /*border-bottom: 1px var(--primary-brand-color-blue--) solid;*/ vertical-align: middle; border-radius: 20px; cursor: pointer; } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHolder .Button:active{ background-color: var(--primary-brand-color-dark-blue--); } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHolder .ButtonTitle{ position: absolute; display: block; padding-left: 10px; padding-right: 10px; width: 100px; height: 40px; top: 0px; lefT: 0px; font-size: 16px; line-height: 40px; text-align: center; text-overflow: ellipsis; color: var(--color-white--); overflow: hidden; } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHolder .Menu{ position: absolute; display: none; top: 42px; left: -6px; width: 130px; min-height: 80px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ overflow: hidden; cursor: pointer; z-index: 1000; } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHolder .Menu .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #FormtemplatesView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; width: 270px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #FormtemplatesView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormtemplatesView .Searchbar .Space{ position: relative; display: inline-block; width: calc(50% - 414px); height: 40px; vertical-align: middle; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: calc(100% - 10px); height: calc(100% - 66px); overflow-x: hidden; overflow-y: auto; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem{ position: relative; display: block; margin:0 auto; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem:last-child{ margin-bottom: 49px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .Clickable{ cursor: pointer; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .FormNoIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .FormIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url('/assets/images/icons/form_file_black.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .PublishedFormIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url('/assets/images/icons/form_file_published.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .MenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 50px; width: 40px; vertical-align: middle; background-position: 10px 5px; background-image: url('/assets/images/icons/menu_dots_black.svg'); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .MenuButton .TableItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 48px; left: -174px; width: 190px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .MenuButton .TableItemMenu_rtl { left: 0px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .MenuButton .TableItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .MenuButton .TableItemMenu .MenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .MenuButton .TableItemMenu .MenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .FormTemplateIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url('/assets/images/icons/form_template_black.svg'); background-position: 10px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .FormName{ position: relative; display: inline-block; top: 0px; width: calc(100% - 852px); /*min-width: 200px;*/ height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .LongFormName{ position: relative; display: inline-block; top: 0px; width: calc(100% - 632px); /*min-width: 200px;*/ height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .TableItemHolder{ position: relative; display: inline-block; top: 0px; width: auto; height: 50px; vertical-align: top; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .TableItemHolder .TableItemTitle{ position: relative; display: none; top: 0px; left: 0px; margin: 0 auto; margin-top: 2px; padding: 0px; width: calc(100% - 20px); height: 25px; font-family: var(--primary-font--); font-size: 14px; line-height: 25px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .CreationTimeIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url(/assets/images/icons/form_due_time_black.svg); background-position: 12px 12px; background-size: 24px 24px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .CompletionTimeIcon{ position: relative; display: inline-block; top: 0px; width: 50px; height: 50px; background-image: url(/assets/images/icons/form_completion_time_black.svg); background-position: 12px 12px; background-size: 24px 24px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .Time{ position: relative; display: inline-block; top: 0px; width: 160px; height: 50px; font-size: 16px; line-height: 50px; text-align: start; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .Username{ position: relative; display: inline-block; top: 0px; width: 170px; height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .ProfilePicture{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 30px; height: 30px; background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; vertical-align: middle; border-radius: 20px; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .Status{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 140px; height: 50px; font-size: 16px; line-height: 50px; text-align: center; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .StatusTitle{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 140px; height: 30px; font-size: 16px; line-height: 30px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; vertical-align: middle; border: 1px var(--color-light-gray--) solid; border-radius: 15px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormEmptyTableItem{ position: relative; display: block; top: calc(50% - 50px); left: 0px; margin: 0px; padding: 0px; padding-top: 10px; padding-bottom: 10px; width: 100%; height: auto; min-height: 30px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 20px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; /*border-bottom: 1px var(--color-light-gray--) solid;*/ } #FormtemplatesViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #FormtemplatesViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #FormtemplatesViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } #FormtemplatesView #FormtemplatesViewContainer .FormsViewTablePaginationHolder{ position: absolute; display: block; bottom: 0px; left: 0px; margin: 0 auto; margin-top:0px; text-align: center; width: 100%; height: 50px; background-color: rgba(255,255,255,0.6); border-top: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 280px; height: 38px; background-color: var(--color-scheme-white--); border-radius: 20px; border: 1px var(--color-scheme-gray-l2--) solid; } #FormtemplatesView #FormtemplatesViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .PreviousPageButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 36px; height: 36px; background-image: url(/assets/images/icons/arrow_left_black.svg); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; opacity: 0.8; overflow: hidden; cursor: pointer; } #FormtemplatesView #FormtemplatesViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .PreviousPageButton.PreviousPageButton_rtl{ background-image: url(/assets/images/icons/arrow_right_black.svg); } #FormtemplatesView #FormtemplatesViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .PageInfoHolder{ position: relative; display: inline-block; padding-left: 15px; padding-right: 15px; width: 178px; height: 40px; font-size: 16px; line-height: 40px; text-align: center; direction: ltr; color: var(--primary-text-color-dark-gray--); vertical-align: middle; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .NextPageButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 36px; height: 36px; background-image: url(/assets/images/icons/arrow_right_black.svg); background-size: 32px 32px; background-position: 2px 2px; background-repeat: no-repeat; transition: 0.1s; vertical-align: middle; opacity: 0.8; overflow: hidden; cursor: pointer; } #FormtemplatesView #FormtemplatesViewContainer .FormsViewTablePaginationHolder .PaginationInnerHolder .NextPageButton.NextPageButton_rtl{ background-image: url(/assets/images/icons/arrow_left_black.svg); } @container FormtemplatesView (width < 1120px){ #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .Time{ width: 160px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .LongFormName{ width: calc(100% - 632px); } } @container FormtemplatesView (width < 1040px){ #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .LongFormName{ width: calc(100% - 632px); } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .CompletionTime{ display: none; } } @container FormtemplatesView (width < 880px){ #FormtemplatesView #FormtemplatesViewContainer .Searchbar .SearchBarHolder .Space{ width: calc(50% - 370px); } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .FormName{ width: calc(100% - 372px); } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .LongFormName{ width: calc(100% - 410px); } #FormtemplatesView .Searchbar .SearchBarHolder .SearchField { width: 200px; } #FormtemplatesView .Searchbar .SearchField input[type=text] { width: 200px; } /**/ #FormtemplatesView #FormtemplatesViewContainer .Searchbar .SearchBarHolder .FilterControlsHolder{ width: 200px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .CreatedBy{ display: none; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .ProfilePicture{ display: none; } } @container FormtemplatesView (width <= 780px){ #FormtemplatesView #FormtemplatesViewContainer .Searchbar .SearchBarHolder .FilterControlsHolder{ width: 110px; } #FormtemplatesView #FormtemplatesViewContainer .Searchbar .SearchBarHolder .FilterControlsHolder .Title{ display: none; } #FormtemplatesView #FormtemplatesViewContainer .Searchbar .SearchBarHolder .Space{ width: calc(50% - 324px); } } @container FormtemplatesView (width < 720px){ #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .FormName{ width: calc(100% - 372px); } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .FormIcon { margin-left: 0px; margin-right: 0px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .PublishedFormIcon{ margin-left: 0px; margin-right: 0px; } } @media only screen and (max-width: 780px) { #FormtemplatesView #FormtemplatesViewContainer .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #FormtemplatesView .Searchbar .SearchBarHolder .SearchField { width: 176px !important; } #FormtemplatesView .Searchbar .SearchField input[type=text] { width: 190px !important; } #FormtemplatesView #FormtemplatesViewContainer .Searchbar .SearchBarHolder .Space{ width: calc(50% - 172px) !important; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableFieldNames{ display: none; } #FormtemplatesView .Searchbar{ height: 55px; margin-left: 0px; margin-right: 0px; width: 100%; } #FormtemplatesView .Searchbar .SearchBarHolder{ margin-top: 5px; } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHidden{ display: none; } #FormtemplatesView .Searchbar .SearchBarHolder .SearchFieldOnly { margin-left: 10px; margin-right: 10px; width: calc(100% - 20px) !important; } #FormtemplatesView .Searchbar .SearchField input[type=text]{ width: 100% !important; } #FormtemplatesView #FormtemplatesViewContainer .Searchbar .SearchBarHolder .Space { display: none; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .FormTemplateIcon { position: relative; display: inline-block; top: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: middle; background-color: var(--color-white--); overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableFieldNames{ display: none; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .AssignedToMe .CreationTimeIcon { display: none !important; opacity: 0.0; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .LongFormName{ width: calc(100% - 80px) !important; background-color: var(--color-white--); } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .LastModified { display: none; } #FormtemplatesView #FormtemplatesViewContainer .Searchbar .SearchBarHolder .FilterControlsHolder { width: 120px; margin-left: 0px; margin-right: 0px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder { margin-bottom: 0px; width: 100%; height: calc(100% - 66px); } #FormtemplatesView #FormtemplatesViewContainer{ margin: 0 auto; margin-top: unset; padding: 0px; width: 100%; height: 100%; background-color: #ffffff; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem { border: 1px var(--color-light-gray--) solid; margin-top: 5px; height: 172px; width: calc(100% - 10px); line-height: 0px; border: 1px var(--color-light-gray--) solid; background-color: var(--color-superlight-gray--); } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem:last-child{ margin-bottom: 51px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .TableItemHolder{ width: 50%; height: 60px; overflow: hidden; border-top: 1px var(--color-lighter-gray--) solid; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .TableItemHolder .TableItemTitle{ display: block; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .Time { position: relative; display: inline-block; margin: 0 auto; margin-top: 1px; padding: 0px; width: calc(100% - 42px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .CreationTime{ width: calc(100% - 42px); padding-left: 10px; padding-right: 10px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .LastModified{ width: calc(100% - 42px); padding-left: 10px; padding-right: 10px; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .Username{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-right: 0px; margin-left: 0px; width: calc(100% - 42px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-left: 10px; margin-right: 10px; margin-top: 5px; padding: 0px; top: 0px; height: 20px; width: 20px; vertical-align: top; background-position: 0px 0px; background-repeat: no-repeat; background-size: 20px 20px; border-radius: 10px; overflow: hidden; opacity: 1.0; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .MenuButton { position: absolute; display: block; margin: 0px; padding: 0px; top: 0px; left: calc(100% - 40px); height: 50px; width: 40px; background-position: 10px 5px; background-image: url(/assets/images/icons/menu_dots_black.svg); background-repeat: no-repeat; background-size: 20px 40px; background-color: var(--color-white--); cursor: pointer; } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .TableItem_rtl .MenuButton { left: 0px !important; } } @media only screen and (hover: hover) and (min-width: 781px){ #FormtemplatesView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #FormtemplatesView .Searchbar .SearchBarHolder .FilterControlsHolder .Menu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem:hover{ background-color: var(--color-lighter-gray--); } #FormtemplatesView #FormtemplatesViewContainer .FormtemplatesViewTableHolder .FormTableItem .MenuButton .TableItemMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } } /* filename: ../app/css/views/CalendareventView.css */ #CalendareventView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; container-name: CalendareventView; container-type: inline-size; } #CalendareventView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #CalendareventView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #CalendareventView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #CalendareventView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #CalendareventView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #CalendareventView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #CalendareventView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #CalendareventView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendareventView > .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: left; background-color: unset; overflow: hidden; } #CalendareventView .InnerHolder .FormHolder{ position: relative; display: block; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; padding: 0px; width: auto; max-width: 700px; height: auto; height: calc(100% - 20px); border-radius: 10px; background-color: var(--color-scheme-white--); overflow: hidden; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow { position: relative; display: block; margin: 0 auto; padding: 0px 10px; width: calc(100% - 20px); height: 50px; text-align: right; background-color: var(--titlebar-background-color--); border-bottom: 1px var(--titlebar-border-color--) solid; z-index: 10; } #CalendareventView .InnerHolder.rtl .FormHolder .FormHeaderRow { text-align: left; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .ResponseDropdown { position: relative; display: none; margin: 9px 5px; padding: 0 10px; width: 140px; height: 30px; background-color: var(--color-scheme-white--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; cursor: pointer; vertical-align: middle; text-align: left; } #CalendareventView .InnerHolder.rtl .FormHolder .FormHeaderRow .ResponseDropdown { text-align: right; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .ResponseDropdown .StatusDisplay { display: inline-block; width: calc(100% - 50px); height: 30px; padding: 0px; padding-left: 15px; padding-right: 15px; line-height: 30px; font-family: var(--primary-font--); font-size: 16px; font-weight: bold; color: var(--primary-text-color-dark-gray--); } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .ResponseDropdown .DropdownArrow { display: inline-block; width: 16px; height: 30px; background-image: url(/assets/images/icons/arrow_down_black.svg); background-size: 22px; background-position: -4px 6px; background-repeat: no-repeat; vertical-align: top; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .ResponseDropdown .ResponseMenu { position: absolute; display: none; top: 42px; right: 0; width: 150px; background-color: var(--color-white--); border: 1px solid var(--color-scheme-gray-l1--); border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .ResponseDropdown .ResponseMenu .MenuItem { position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; height: 40px; width: calc(100% - 20px); font-size: 16px; line-height: 40px; text-align: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .ResponseDropdown .ResponseMenu .MenuItem:last-child { border-bottom: unset; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .FormHeaderSpace { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 252px); height: 100%; vertical-align: top; overflow: hidden; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .FormHeaderButtonsHolder { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 80px; height: 50px; vertical-align: top; overflow: hidden; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .EditButton, #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .CloseButton { position: relative; display: inline-block; margin: 10px 5px; width: 30px; height: 30px; background-size: 20px 20px; background-position: center; background-repeat: no-repeat; cursor: pointer; vertical-align: middle; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .EditButton { background-image: url('/assets/images/icons/edit_document_white.svg'); background-color: var(--color-scheme-blue-l1--); border-radius: 5px; transition: 0.2s linear; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .CloseButton { background-image: url('/assets/images/icons/close_document_white.svg'); background-color: var(--color-scheme-blue-l1--); border-radius: 5px; transition: 0.2s linear; } #CalendareventView .InnerHolder .FormHolder .EventForm{ position: relative; display: block; margin: 0 auto; padding: 10px 50px 10px 50px; width: 100%; max-width: 600px; height: calc(100% - 70px); overflow-x: hidden; overflow-y: auto; } #CalendareventView .InnerHolder .FormHolder .EventForm .EventTitle{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 20px; line-height: 50px; font-weight: bold; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendareventView .InnerHolder .FormHolder .EventForm .EventTime{ position: relative; display: block; margin: 0px; margin-bottom: 5px; padding: 0px; top: 0px; left: 0px; width: 100%; min-height: 30px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 24px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendareventView .InnerHolder .FormHolder .EventForm .RecurrenceRule{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; min-height: 30px; height: auto; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; font-weight: normal; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-gray--); text-overflow: ellipsis; } #CalendareventView .InnerHolder .FormHolder .EventForm .OwnerHeader { position: relative; display: block; margin: 0 auto; padding: 5px; padding-top: 10px; padding-bottom: 0px; align-items: center; margin-bottom: 15px; width: calc(100% - 12px); height: auto; background-color: var(--color-scheme-gray-l0--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 5px; } #CalendareventView .InnerHolder .FormHolder .EventForm .OwnerHeader .ProfilePicutre { position: relative; display: inline-block; margin: 2px; padding: 0px; margin-right: 10px; margin-left: 10px; margin-bottom: 20px; width: 36px; height: 36px; border-radius: 18px; background-size: cover; background-position: center; background-repeat: no-repeat; margin-right: 10px; vertical-align: top; } #CalendareventView .InnerHolder .FormHolder .EventForm .OwnerHeader .Name { position: relative; display: inline-block; margin: 0 auto; margin-bottom: 20px; padding: 0px; padding-top: 10px; width: calc(100% - 56px); height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; color: var(--primary-text-color-dark-gray--); font-weight: bold; vertical-align: top; } #CalendareventView .InnerHolder .FormHolder .EventForm .OwnerHeader .ResponseButtonsRow { position: relative; display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; width: 100%; } #CalendareventView .InnerHolder .FormHolder .EventForm .OwnerHeader .ResponseButtonsRow .ResponseButton { position: relative; flex: 1; height: 30px; line-height: 30px; text-align: center; font-family: var(--primary-font--); font-size: 14px; border: 1px solid var(--color-scheme-gray-l2--); color: var(--primary-text-color-dark-gray--); background-color: var(--color-white--); border-radius: 5px; cursor: pointer; transition: all 0.2s ease; } #CalendareventView .InnerHolder .FormHolder .EventForm .OwnerHeader .ResponseButtonsRow .ResponseButton.Active { background-color: var(--color-scheme-blue-l2--); color: var(--color-white--); border: 1px solid var(--color-scheme-blue-l1--); } #CalendareventView .InnerHolder .FormHolder .EventForm .DescriptionTitle{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendareventView .InnerHolder .FormHolder .EventForm .Description{ position: relative; display: block; margin: 0px; margin-bottom: 20px; padding: 10px; top: 0px; left: 0px; width: calc(100% - 22px); min-height: 20px; max-height: 300px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 22px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-gray-l1--); border-radius: 10px; border: 1px var(--color-scheme-gray-l2--) solid; overflow-x: hidden; overflow-y: auto; } #CalendareventView .InnerHolder .FormHolder .EventForm .NavigateButton { position: relative; display: inline-block; margin: 0 auto; margin-top: 10px; padding: 0px; width: 100px; height: 20px; line-height: 20px; font-family: var(--primary-font--); font-size: 14px; /* font-weight: bold; */ color: var(--color-white--); text-align: center; background-color: var(--primary-brand-color-blue--); border-radius: 15px; cursor: pointer; white-space: nowrap; vertical-align: top; transition: opacity 0.2s; } #CalendareventView .InnerHolder .FormHolder .EventForm .LocationRow { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; } #CalendareventView .InnerHolder .FormHolder .EventForm .LocationRow .LocationIcon { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/location_on_black.svg'); background-size: 24px 24px; background-position: 3px 3px; background-repeat: no-repeat; vertical-align: top; } #CalendareventView .InnerHolder .FormHolder .EventForm .LocationRow .LocationText { position: relative; display: inline-block; margin: 0 auto; margin-top: 6px; padding: 0px; height: auto; min-height: 30px; width: calc(100% - 40px); font-family: var(--primary-font--); font-size: 16px; line-height: 18px; color: var(--primary-text-color-dark-gray--); padding-right: 10px; word-break: break-word; vertical-align: top; } #CalendareventView .InnerHolder .FormHolder .EventForm .LocationRow .NavigateButton:hover { background-color: var(--color-scheme-blue-l1--); } #CalendareventView .InnerHolder .FormHolder .EventForm .InviteRow { position: relative; display: inline-block; margin: 0px; margin-top: 20px; padding: 0px; width: 100%; height: 40px; overflow: hidden; } #CalendareventView .InnerHolder .FormHolder .EventForm .InviteRow.Underlined { border-bottom: 1px var(--color-scheme-gray-l2--) solid; } #CalendareventView .InnerHolder .FormHolder .EventForm .InviteeTitle{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 102px); height: 40px; font-family: var(--primary-font--); font-size: 16px; font-weight: bold; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendareventView .InnerHolder .FormHolder .EventForm .ExpandInviteButton { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 100px; height: 20px; font-family: var(--primary-font--); font-size: 14px; color: var(--color-white--); background-color: var(--primary-brand-color-blue--); text-align: center; line-height: 20px; vertical-align: middle; border-radius: 10px; cursor: pointer; transition: background-color 0.2s; } #CalendareventView .InnerHolder .FormHolder .EventForm .AttendeesHolder{ position: relative; display: none; margin: 0 auto; padding: 10px; width: calc(100% - 22px); height: auto; background-color: var(--color-scheme-gray-l0--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 5px; } #CalendareventView .InnerHolder .FormHolder .EventForm .Title{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; font-weight: bold; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #CalendareventView .InnerHolder .FormHolder .EventForm .Title.WithTopMargin{ margin-top: 20px; } #CalendareventView .InnerHolder .FormHolder .EventForm .Title.WithNavigateButton{ width: calc(100% - 100px); display: inline-block; } #CalendareventView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown { position: relative; display: block; margin: 0px; margin-bottom: 10px; padding: 0px; width: 100%; max-width: 250px; min-height: 50px; height: auto; cursor: pointer; } #CalendareventView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersHolder { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 50px; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; overflow: hidden; cursor: pointer; } #CalendareventView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersHolder .RemindersIcon { position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-image: url('/assets/images/icons/alarm_black.svg'); background-color: var(--color-scheme-gray-l1--); background-size: 30px 30px; background-repeat: no-repeat; background-position: 10px 10px; overflow: hidden; } #CalendareventView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersHolder .RemindersName { position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-right: 10px; padding-left: 10px; width: calc(100% - 70px); height: 50px; vertical-align: middle; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; color: var(--primary-text-color-dark-gray--); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #CalendareventView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersMenu { position: relative; display: none; margin: 0 auto; margin-top: 5px; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 205px; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l1--) solid; border-radius: 10px; filter: drop-shadow(rgba(0, 0, 0, 0.4) 2px 2px 1px); transform: translateZ(0px); overflow-x: hidden; overflow-y: auto; cursor: pointer; z-index: 1000; } #CalendareventView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersMenu .MenuItem { position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 50px; font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; } #CalendareventView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersMenu .MenuItem:last-child { border-bottom: unset; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown{ position: relative; display: block; margin: 0px; margin-bottom: 10px; padding: 0px; width: 100%; max-width: 250px; min-height: 50px; height: auto; cursor: pointer; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarsHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 50px; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l2--) solid; border-radius: 10px; overflow: hidden; cursor: pointer; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarsHolder .CalendarIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-image: url('/assets/images/icons/calendar_black.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 10px 10px; overflow: hidden; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarsHolder .CalendarName{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 70px); height: 50px; vertical-align: middle; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; color: var(--primary-text-color-dark-gray--); text-align: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarMenu{ position: relatie; display: none; margin: 0 auto; margin-top: 5px; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 205px; background-color: var(--color-scheme-white--); border-top: 1px var(--color-scheme-gray-l1--) solid; border-bottom: 1px var(--color-scheme-gray-l1--) solid; border-left: 1px var(--color-scheme-gray-l1--) solid; border-right: 1px var(--color-scheme-gray-l1--) solid; border-radius: 10px; filter: drop-shadow(rgba(0, 0, 0, 0.4) 2px 2px 2px); transform: translateZ(0px); overflow-x: hidden; overflow-y: auto; cursor: pointer; z-index: 1000; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarMenu .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 50px; font-size: 16px; line-height: 50px; text-align: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarMenu .MenuItem:last-child{ border-bottom: unset; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown.Disabled { cursor: default !important; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown.Disabled .CalendarsHolder { cursor: default !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown.Disabled .CalendarsHolder .CalendarName { padding-right: 10px; padding-left: 10px; width: calc(100% - 60px); text-align: start; color: var(--primary-text-color-gray--); } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown.Disabled .CalendarsHolder .CalendarIcon{ width: 30px; background-position: 0px 10px; } #CalendareventView .InnerHolder .FormHolder .EventForm .ShareTable { position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 2px); min-height: 40px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; text-align: inherit; background-color: var(--color-scheme-white--); border: 1px var(--color-scheme-gray-l1--) solid; overflow-x: hidden; overflow-y: auto; } #CalendareventView .InnerHolder .FormHolder .EventForm .ShareTable .Item { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; overflow: hidden; border-bottom: 1px var(--color-scheme-gray-l1--) solid; } #CalendareventView .InnerHolder .FormHolder .EventForm .ShareTable .Item:last-child { border-bottom: none; } #CalendareventView .InnerHolder .FormHolder .EventForm .ShareTable .Item .ProfilePicture { position: relative; display: inline-block; margin: 3px 5px; padding: 0px; height: 30px; width: 30px; vertical-align: top; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px var(--color-scheme-white--) solid; } #CalendareventView .InnerHolder .FormHolder .EventForm .ShareTable .Item .Name { position: relative; display: inline-block; margin: 0px 5px; padding: 0px; /* Reduced width to prevent overlap with the status badge */ width: calc(100% - 180px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; vertical-align: top; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CalendareventView .InnerHolder .FormHolder .EventForm .ShareTable .Item .StatusLabel { position: relative; display: inline-block; margin: 10px 5px; padding: 0 8px; width: 100px; height: 20px; line-height: 20px; font-size: 11px; font-weight: bold; border-radius: 10px; text-transform: uppercase; text-align: center; vertical-align: top; } .StatusLabel.accepted { background-color: var(--calendar-invite-status-accepted-background--); color: var(--calendar-invite-status-accepted-text--); } .StatusLabel.tentative { background-color: var(--calendar-invite-status-tentative-background--); color: var(--calendar-invite-status-tentative-text--); } .StatusLabel.declined { background-color: var(--calendar-invite-status-declined-background--); color: var(--calendar-invite-status-declined-text--); } .StatusLabel.pending { background-color: var(--calendar-invite-status-pending-background--); color: var(--calendar-invite-status-pending-text--); } .StatusLabel.organizer { background-color: var(--color-scheme-gray-l1--); } /* Updating the Profile Picture Fallback to use proper white */ #CalendareventView .InnerHolder .FormHolder .EventForm .ShareTable .Item .ProfilePicture { border: 2px var(--color-scheme-white--) solid; } @media only screen and (hover: hover) and (min-width: 781px){ #CalendareventView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .ResponseDropdown:hover{ background-color: var(--color-scheme-gray-l1--); } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .EditButton:hover, #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .CloseButton:hover { background-color: var(--color-scheme-blue-l3--); border-radius: 5px; } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow .ResponseDropdown .ResponseMenu .MenuItem:hover { background-color: var(--color-scheme-gray-l1--); } #CalendareventView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown .RemindersMenu .MenuItem:hover { background-color: var(--color-lighter-gray--); } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown .CalendarMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #CalendareventView .InnerHolder .FormHolder .EventForm .OwnerHeader .ResponseButtonsRow .ResponseButton:hover{ background-color: var(--color-scheme-gray-l1--); } #CalendareventView .InnerHolder .FormHolder .EventForm .OwnerHeader .ResponseButtonsRow .ResponseButton.Active:hover{ background-color: var(--color-scheme-blue-l1--) !important; border-color: var(--color-scheme-blue-l1--) !important; } #CalendareventView .InnerHolder .FormHolder .EventForm .ExpandInviteButton:hover { background-color: var(--color-scheme-blue-l1--); } #CalendareventView .InnerHolder .FormHolder .EventForm .NavigateButton:hover { background-color: var(--color-scheme-blue-l1--); } } @container CalendareventView (width < 700px){ #CalendareventView .InnerHolder .FormHolder{ margin-top: unset; margin-bottom: unset; height: 100%; border-radius: unset; } #CalendareventView .InnerHolder .FormHolder .EventForm{ padding: 10px; width: calc(100% - 20px); } #CalendareventView .InnerHolder .FormHolder .FormHeaderRow { padding: 0px; width: 100%; } #CalendareventView .InnerHolder .FormHolder .EventForm .RemindersSelectionDropdown { max-width: unset; } #CalendareventView .InnerHolder .FormHolder .EventForm .CalendarSelectionDropdown{ max-width: unset; } } /* filename: ../app/css/views/UpdatepasswordView.css */ #UpdatepasswordView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: auto; min-height: 100%; font-family: var(--primary-font--); text-align: center; color: var(--primary-text-color-dark-gray--); overflow-x: hidden; overflow-y: auto; } #UpdatepasswordView #UpdatePasswordTitle{ position: relative; display: block; top: 0px; left: 0px; margin-top:40px; margin-bottom: 30px; width: 100%; height: 50px; font-family: var(--primary-brand-font--); font-size: 40px; line-height: 40px; text-align: center; color: var(--primary-brand-color-blue--); } #UpdatepasswordView #UpdatePasswordPanel{ position: relative; display: inline-block; top: 0px; left: 0px; padding: 50px; padding-bottom: 10px; margin-bottom: 30px; width: 500px; min-height: 360px; font-size: 12px; line-height: 20px; text-align: center; color: var(--primary-text-color-dark-gray--); background-color: #ffffff; border-radius: 20px; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } #UpdatepasswordView #UpdatePasswordPanel #ErrorMessageHolder{ position: relative; display: inline-block; margin-top: 20px; top: 0px; left: 0px; width: 85%; min-height: 60px; height: auto; font-size: 20px; line-height: 28px; color: var(--primary-text-color-dark-gray--); } #UpdatepasswordView #UpdatePasswordPanel input[type=text], #UpdatepasswordView #UpdatePasswordPanel input[type=password]{ position: relative; display: block; width: 100%; height: 50px; padding: 12px 20px; margin: 20px 0; box-sizing: border-box; font-size: 18px; line-height: 38px; border: none; background-color: #f0f0f0; color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 10px; } #UpdatepasswordView #UpdatePasswordPanel input[type=text]:focus, #UpdatepasswordView #UpdatePasswordPanel input[type=password]:focus { background-color: #e0e0e0; border-bottom: 1px solid var(--primary-brand-color-blue--); outline: none; } #UpdatepasswordView #UpdatePasswordPanel #ResetButton{ position: relative; display: inline-block; width: 80%; height: 50px; padding: 12px 20px; margin: 20px 0px 0px 0px; box-sizing: border-box; font-size: 18px; line-height: 25px; border: 1px var(--primary-brand-color-blue--) solid; border-radius: 30px; background-color: var(--primary-brand-color-blue--); color: #ffffff; cursor: pointer; transition: 0.3s; } #UpdatepasswordView #UpdatePasswordPanel #ResetButton:hover{ background-color: var(--primary-brand-color-dark-blue--); transition: 0.3s; } #UpdatepasswordView #UpdatePasswordPanel #LoginButton{ position: relative; display: inline-block; width: 100%; height: 40px; padding: 20px 20px; margin: 40px 0px 0px 0px; box-sizing: border-box; font-size: 16px; line-height: 22px; color: #000000; border-top: 1px var(--color-light-gray--) solid; cursor: pointer; transition: 0.3s; } #UpdatepasswordView #UpdatePasswordPanel #LoginButton:hover{ color: var(--primary-brand-color-blue--); transition: 0.3s; } @media only screen and (max-width: 780px) { #UpdatepasswordView #UpdatePasswordPanel #ErrorMessageHolder{ font-size: 18px; line-height: 22px; margin-top:20px; margin-bottom:0px; } #UpdatepasswordView #UpdatePasswordTitle{ position: absolute; display: block; margin: 0px; padding: 0px; top: 30px; left: 0px; width: 100%; font-size: 36px; z-index: 1000; } #UpdatepasswordView #UpdatePasswordPanel{ position: absolute; display: block; margin: 0px; padding: 0px; padding: 20px; padding-top: 80px; top: 0px; left: 0px; width: calc(100% - 40px); height: calc(100% - 100px); border-radius: 0px; border: none; } } /* filename: ../app/css/views/TimetrackingView.css */ #TimetrackingView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); } #TimetrackingView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #TimetrackingView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #TimetrackingView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; overflow: hidden; } #TimetrackingView .Titlebar .TitleDynamicText{ position: relative; display: none; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: auto; height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #TimetrackingView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; opacity: 1.0; } #TimetrackingView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -175px; width: 205px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #TimetrackingView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #TimetrackingView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #TimetrackingView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #TimetrackingView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #TimetrackingView > .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: center; background-color: var(--inner-holder-background-color--); overflow: hidden; } #TimetrackingViewTabBar{ position: relative; display: block; margin: 0 auto; margin-top: 10px; padding: 0px; width: calc(100% - 18px); height: 50px; text-align: left; } #TimetrackingViewTabBar .TabBarMenuItem{ position: relative; display: inline-block; margin: 0px; margin-left: 2px; margin-right: 2px; padding: 0px; top: 0px; left: 0px; text-align: center; height: 48px; width: auto; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-top: 1px var(--color-light-gray--) solid; vertical-align: top; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #ffffff; cursor: pointer; } #TimetrackingViewTabBar .TabBarMenuItem.Selected{ background-color: var(--primary-brand-color-blue--); } #TimetrackingViewTabBar .TabBarMenuItem.Selected:hover{ background-color: var(--primary-brand-color-blue--); } #TimetrackingViewTabBar .TabBarMenuItem:hover{ background-color: var(--color-light-gray--); } #TimetrackingViewTabBar .TabBarMenuItemIcon{ position: relative; display: inline-block; margin-right: 10px; margin-left: 10px; top: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #TimetrackingViewTabBar .TabBarMenuItemTitle{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: auto; height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: left; vertical-align: middle; color: var(--primary-text-color-gray-); text-overflow: ellipsis; } #TimetrackingViewTabBar .TabBarMenuItem.Selected .TabBarMenuItemTitle{ color: #ffffff; } #TimetrackingViewContainer{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 22px); height: calc(100% - 70px); background-color: var(--inner-holder-background-color--); filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } #TimetrackingViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #TimetrackingViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; transition: 0.2s; } #TimetrackingView #TimetrackingViewPopUpContainer #PopupTitlebar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; margin-bottom: 10px; width: 100%; height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #TimetrackingView #TimetrackingViewPopUpContainer #PopupTitlebar #PopupTitlebarIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #TimetrackingView #TimetrackingViewPopUpContainer #PopupTitlebar #PopupTitlebarTitle{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } /**/ #TimetrackingView #TimetrackingViewPopUpContainer .PopupTitlebarProfileHolder{ position: absolute; display: none; top:0px; left:0px; width: calc(100% - 40px); height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); } #TimetrackingView #TimetrackingViewPopUpContainer .PopupTitlebarProfileHolder_rtl{ left: unset; text-align: right; right: 0px; } #TimetrackingView #TimetrackingViewPopUpContainer .PopupTitlebarProfileHolder .PopupTitlebarProfilePicture{ position: relative; display: inline-block; margin: 5px; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 38px; height: 38px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; border-radius: 22px; border: 2px var(--color-scheme-white--) solid; } #TimetrackingView #TimetrackingViewPopUpContainer .PopupTitlebarProfileHolder .PopupTitlebarProfileName{ position: relative; position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 62px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: inherit; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } /**/ #TimetrackingView #TimetrackingViewPopUpContainer #PopupTitlebar .PopupTitlebarMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #TimetrackingView #TimetrackingViewPopUpContainer #PopupTitlebar .PopupTitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #TimetrackingView #TimetrackingViewPopUpContainer #PopupTitlebar .PopupTitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #TimetrackingView #TimetrackingViewPopUpContainer #PopupTitlebar .PopupTitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #TimetrackingView #TimetrackingViewPopUpContainer #PopupTitlebar .PopupTitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #TimetrackingView #TimetrackingViewPopUpContainer #PopupTitlebar .PopupTitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #TimetrackingViewPopUpContainerViewHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 53px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-scheme-gray-l0--); overflow: hidden; overflow-y: auto; } #TimetrackingView #TimetrackingViewPopUpContainer .TimetrackingViewPopUpContainerViewHolder_WithoutTitleBar{ top: 0px !important; height: 100% !important; } @media only screen and (max-width: 780px) { #TimetrackingView #TimetrackingViewPopUpContainer .PopupTitlebarProfileHolder{ display: block; } #TimetrackingView .Titlebar .TitleDynamicText{ display: inline-block; } #TimetrackingViewContainer { position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 60px); filter: unset; transform: unset; } #TimetrackingViewTabBar .TabBarMenuItemTitle{ position: relative; display: none; } #TimetrackingViewTabBar .TabBarMenuItemIcon{ margin-top: 8px; } } /* filename: ../app/css/views/EmaileditorView.css */ #EmaileditorView { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: left; background-color: var(--view-background-color--); overflow: hidden; container-name: EmaileditorView; container-type: inline-size; } #EmaileditorView .Titlebar { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: inherit; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #EmaileditorView .Titlebar .TitleBarBackButton{ position: relative; display: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 40px; height: 50px; background-image: url(assets/images/icons/arrow_back_white.svg); background-size: 30px 30px; background-repeat: no-repeat; background-position: 5px 10px; vertical-align: middle; cursor: pointer; overflow: hidden; } #EmaileditorView .Titlebar .TitleBarBackButton.TitleBarBackButton_rtl { background-image: url(assets/images/icons/arrow_forward_white.svg) !important; } #EmaileditorView .Titlebar .Icon { position: relative; display: inline-block; margin: 10px; width: 30px; height: 30px; vertical-align: middle; background-size: cover; background-repeat: no-repeat; background-position: 0px 0px; } #EmaileditorView .Titlebar .Title { position: relative; display: inline-block; margin: 0 auto; width: calc(100% - 136px); height: 50px; font-family: var(--primary-font--); font-size: 20px; line-height: 50px; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } #EmaileditorView .Titlebar .TitleSubmitButton { position: relative; display: inline-block; margin-right: 5px; margin-left: 5px; height: 40px; width: 40px; background-image: url('/assets/images/icons/submit_white.svg'); background-repeat: no-repeat; background-size: 30px 30px; background-position: 5px 5px; vertical-align: middle; background-color: var(--color-scheme-blue-l1--); border-radius: 5px; transition: 0.1s linear; cursor: pointer; } #EmaileditorView .Titlebar .TitleMenuButton { position: relative; display: inline-block; right: 6px; height: 50px; width: 36px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; background-position: 6px 0px; vertical-align: middle; cursor: pointer; } #EmaileditorView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); z-index: 1000; } #EmaileditorView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #EmaileditorView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #EmaileditorView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; } #EmaileditorView .InnerHolder { position: relative; display: block; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #EmaileditorView .InnerHolder .EmailHolder { position: relative; display: block; margin: 5px auto; width: 800px; height: calc(100% - 10px); background-color: var(--color-scheme-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); overflow-x: hidden; overflow-y: auto; } #EmaileditorView .InnerHolder .EmailHolder .DragZone{ position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000000; outline: 2px dashed #0078d7 !important; outline-offset: -10px; opacity: 0.4; z-index: 10; } #EmaileditorView .InnerHolder .EmailHolder .EmailHeader { position: relative; margin-top: 4px; height: 174px; } #EmaileditorView .EmailSender, #EmaileditorView .EmailRecipient, #EmaileditorView .EmailCC, #EmaileditorView .EmailBCC { height: 30px; position: relative; margin: 2px; margin-left: 4px; margin-right: 4px; padding: 0px; padding-left: 2px; padding-right: 2px; width: calc(100% - 14px); border-radius: 4px; background-color: var(--color-scheme-gray-l0--); border: 1px var(--color-scheme-gray-l1--) solid; } #EmaileditorView .EmailRecipientInput, .EmailCCInput, .EmailBCCInput { width: 100px; height: 30px; border: none; outline: none; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; background: transparent; } #EmaileditorView .EmailSender .EmailSenderTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 4px; padding-right: 4px; width: auto; max-width: 72px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-light-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; overflow: hidden; } #EmaileditorView .EmailSender .EmailSenderInnerHolder::before{ content: "â–¼"; font-size: 10px; color: var(--primary-text-color-light-gray--); position: absolute; transform: translate(-15px, 2px); } #EmaileditorView .EmailSender .EmailSenderInnerHolder.EmailSenderInnerHolder_rtl::before{ transform: translate(15px, 2px); } #EmaileditorView .EmailSender .EmailSenderInnerHolder.NoArrow{ padding-left:0px; padding-right:0px; width: calc(100% - 80px); } #EmaileditorView .EmailSender .EmailSenderInnerHolder.NoArrow::before{ content: none !important; } #EmaileditorView .EmailSender .EmailSenderInnerHolder{ position: relative; display: inline-block; padding: 0 20px; width: calc(100% - 120px); height: 30px; border: none; outline: none; font-family: var(--primary-font--); color: var(--primary-text-color-dark-gray--); font-size: 16px; line-height: 30px; background: transparent; vertical-align: top; } #EmaileditorView .EmailSender .EmailSenderListHolder{ position: relative; display: none; margin: 0 auto; margin-left: 30px; margin-right: 30px; padding: 0px; width: 100%; max-width: 300px; height: auto; min-height: 30px; background-color: var(--color-scheme-white--); border: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); overflow-x: hidden; overflow-y: auto; z-index: 100; } #EmaileditorView .EmailSender .EmailSenderListHolder .ListItem{ position: relative; display: block; width: calc(100% - 20px); height: 30px; padding: 0 10px; font-family: var(--primary-font--); color: var(--primary-text-color-dark-gray--); font-size: 14px; line-height: 30px; text-align: inherit; text-overflow: ellipsis; border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; cursor: pointer; } #EmaileditorView .EmailAttachmentsButton { position: relative; display: inline-block; margin: 2px; padding: 0px; width: 46px; height: 34px; background-color: var(--color-scheme-blue-l2--); overflow: hidden; vertical-align: top; background-image: url('/assets/images/icons/attach_file_white.svg'); background-size: 30px 20px; background-position: 8px 7px; background-repeat: no-repeat; border-radius: 5px; transition: 0.2s linear; cursor: pointer; } #EmaileditorView .EmailHeader .EmailSubject { position: relative; display: inline-block; margin: 0 auto; padding: 0 5px; width: calc(100% - 65px); height: 38px; vertical-align: top; } .EmailSubjectInput { position: relative; display: block; margin: 2px auto 0; padding: 0 4px; width: calc(100% - 8px); height: 32px; font-family: var(--primary-font--); color: var(--primary-text-color-dark-gray--); font-size: 16px; background: transparent; background-color: var(--color-scheme-gray-l0--); border-radius: 4px; border: 1px var(--color-scheme-gray-l1--) solid; outline: none; } #EmaileditorView .InnerHolder .EmailHolder .EmailEditorHolder { position: relative; display: flex; flex-direction: column; margin: 0px; margin-top: 5px; padding: 0px; width: 100%; min-height: calc(100% - 232px); height: auto; border: unset !important; transition: height 0.1s ease-in-out; overflow-y: auto; } #EmaileditorView .InnerHolder .EmailHolder .EmailEditorHolder.WithAttachments { min-height: calc(100% - 325px) !important; height: auto; } #EmaileditorView .OriginalContentHolder { position: relative; display: none; padding: 10px; background-color: #ffffff; } #EmaileditorView .EmailQuoteToggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 22px; background-color: #f1f3f4; border: 1px solid #dadce0; border-radius: 4px; cursor: pointer; } #EmaileditorView .EmailQuoteToggle span { width: 3px; height: 3px; background-color: #5f6368; border-radius: 50%; margin: 0 1.5px; } #EmaileditorView .OriginalContentIframe { display: none; width: 100%; border: none; margin-top: 10px; overflow: hidden; } #EmaileditorView .AttachmentListHolder { position: relative; display: none; margin:0 auto; margin-top: 5px; padding: 0px; width: 100%; height: 93px; background-color: #fafafa; border-top: 1px var(--color-lighter-gray--) solid; border-bottom: 1px var(--color-lighter-gray--) solid; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 5px; box-sizing: border-box; } #EmaileditorView .AttachmentListHolder .AttachmentItem { position: relative; display: inline-block; margin: 5px auto 0; padding: 0px; width: 110px; height: auto; vertical-align: top; transition: 0.2s linear; cursor: pointer; } #EmaileditorView .AttachmentListHolder .AttachmentItem .Image { position: relative; display: block; margin: 2px auto; padding: 0px; width: 60px; height: 50px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; background-color: #000; overflow: hidden; transition: 0.2s linear; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); } #EmaileditorView .AttachmentListHolder .AttachmentItem .File { position: relative; display: block; margin: 0 auto; padding: 0px; width: 50px; height: 55px; background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); } .EmailEditorHolder .ql-editor img{ padding: 5px; border-radius: 10px; } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.PDF { background-image: url('/assets/images/icons/file_pdf_color.svg'); height: 50px; margin-top: 2px; } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.WORD { background-image: url('/assets/images/icons/word-document.svg'); } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.EXCEL { background-image: url('/assets/images/icons/excel-document.svg'); } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.POWERPOINT { background-image: url('/assets/images/icons/ppt-document.svg'); } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.ZIP { background-image: url('/assets/images/icons/zip-document.svg'); } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.CSV { background-image: url('/assets/images/icons/csv-document.svg'); } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.TXT { background-image: url('/assets/images/icons/txt-document.svg'); } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.AUDIO { background-image: url('/assets/images/icons/audio-document.svg'); } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.VIDEO { background-image: url('/assets/images/icons/video-document.svg'); } #EmaileditorView .AttachmentListHolder .AttachmentItem .File.OTHER { background-image: url('/assets/images/icons/other-document.svg'); } #EmaileditorView .AttachmentListHolder .AttachmentItem .Footer { position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 10px); height: 30px; font-family: var(--primary-font--); color: var(--primary-text-color-dark-gray--); font-size: 14px; line-height: 30px; text-align: center; text-overflow: ellipsis; overflow: hidden; } #EmaileditorView .AttachmentListHolder .AttachmentItem .RemoveBtn { position: absolute; top: -6px; right: 18px; width: 20px; height: 20px; background: #ffffff; color: #000000; border: 1px solid #ccc; border-radius: 50%; line-height: 20px; font-size: 18px; font-weight: bold; cursor: pointer; background-image: url('/assets/images/icons/close_document_black.svg'); background-position: 4px 4px; background-size: 12px 12px; background-repeat: no-repeat; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); text-align: center; z-index: 5; } #EmaileditorView .EmaileditorViewLoadingScreen{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: rgba(256, 255, 255, 0.2); overflow: hidden; } /* --- QUILL OVERRIDES --- */ #EmaileditorView .ql-toolbar.ql-snow { margin: 0 auto; margin-top: 2px; max-width: calc(100% - 10px) !important; direction: ltr; text-align: center; width: auto; background-color: var(--color-scheme-gray-l1--); border: none; border: 1px var(--color-light-gray--) solid !important; border-radius: 4px; } #EmaileditorView .ql-toolbar.ql-snow .ql-formats { margin-right: 2px; margin-left: 2px; } #EmaileditorView .ql-editor { flex-grow: 1; display: block; background-color: #f9f9f9; border-radius: 4px; width: calc(100% - 12px); margin: 0 auto; font-size: 16px !important; font-family: Arial, sans-serif !important; border: 1px var(--color-scheme-gray-l1--) solid; } #EmaileditorView .ql-editor p, #EmaileditorView .ql-editor span { font-family: inherit; font-size: inherit; } #EmaileditorView .ql-snow .ql-picker.ql-size .ql-picker-options, #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-options { padding: 8px 4px; max-height: 274px; overflow-y: auto; } #EmaileditorView .ql-snow .ql-picker.ql-size .ql-picker-item, #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-item { padding: 6px 5px !important; height: auto !important; line-height: 24px !important; } #EmaileditorView .ql-snow .ql-picker.ql-size .ql-picker-label::before, #EmaileditorView .ql-snow .ql-picker.ql-size .ql-picker-item::before { content: attr(data-value) !important; } #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before, #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before { content: 'Arial' !important; } #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before, #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before { content: 'Courier' !important; } #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before, #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before { content: 'Georgia' !important; } #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before, #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before { content: 'Tahoma' !important; } #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"]::before, #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"]::before { content: 'Times New Roman' !important; } #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet-ms"]::before, #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet-ms"]::before { content: 'Trebuchet MS' !important; } #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before, #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before { content: 'Verdana' !important; } #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-label { display: inline-block; max-width: 100px; padding-left: 4px; padding-right: 14px; overflow: hidden; white-space: nowrap; } #EmaileditorView .ql-snow .ql-picker.ql-font .ql-picker-label::before { display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } #EmaileditorView .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button { padding: 2px 5px; width: 40px; transition: 0.2s linear; } #EmaileditorView .ql-snow .ql-tooltip{ padding: 5px; } #EmaileditorView .ql-snow .ql-tooltip input[type=text] { border: 1px solid #ccc !important; outline: none !important; } .ql-snow .ql-tooltip[data-mode=link]::before { content: var(--ql-lang-link-title, "Link:") !important; text-align: center; padding-left: 4px; padding-right: 4px; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: var(--ql-lang-link-save, "Save") !important; border-right: 0 !important; text-align: center; padding-left: 4px; padding-right: 4px; } .ql-snow .ql-tooltip::before{ content: var(--ql-lang-link-visitURL, "Visit URL") !important; } .ql-snow .ql-tooltip a.ql-action::after { content: var(--ql-lang-link-edit, "Edit") !important; border-right: 1px solid #ccc; margin-left: 16px; padding-right: 8px; } .ql-snow .ql-tooltip a.ql-remove::before { content: var(--ql-lang-link-remove, "Remove") !important; } @container EmaileditorView (width <= 800px){ #EmaileditorView .Titlebar .TitleBarBackButton{ display: inline-block; } #EmaileditorView .Titlebar .Title{ width: calc(100% - 176px); } #EmaileditorView .InnerHolder .EmailHolder { width: 100%; } #EmaileditorView .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button { padding: 3px 5px; width: 26px; } } @container EmaileditorView (width <= 655px){ #EmaileditorView .InnerHolder .EmailHolder .EmailEditorHolder { min-height: calc(100% - 254px); } #EmaileditorView .InnerHolder .EmailHolder .EmailEditorHolder.WithAttachments { min-height: calc(100% - 349px) !important; } } @media only screen and (hover: hover) and (min-width: 781px){ #EmaileditorView .Titlebar .TitleSubmitButton:hover{ background-color: rgba(200, 200, 200, 0.2); } #EmaileditorView .AttachmentListHolder .AttachmentItem .RemoveBtn:hover { background-color: var(--color-scheme-gray-l1--); } #EmaileditorView .EmailSender .EmailSenderListHolder .ListItem:hover{ background-color: var(--color-lighter-gray--); } } /* filename: ../app/css/views/TaskView.css */ #TaskView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); } #TaskView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px !important; width: 100%; height: 50px; text-align: center; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #TaskView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #TaskView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #TaskView .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #TaskView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #TaskView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #TaskView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #TaskView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #TaskView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #TaskView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; max-width: 800px; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow: hidden; overflow-y: auto; } #TaskView .InnerHolder .TaskHolder{ position: relative; display: block; margin: 0 auto; margin-top: 5px; top: 0px; left: 0px; max-width: 790px; width: calc(100% - 10px); height: auto; min-height: calc(100% - 10px); text-align: left; /*border: 8px var(--color-lighter-gray--) solid;*/ } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar{ position: relative; display: block; margin: 0px; top: 0px; left: 0px; width: calc(100% - 2px); height: 50px; text-align: center; background-color: var(--color-lighter-gray--); border: 1px var(--color-light-gray--) solid; } #TaskView .InnerHolder .TaskHolder .TaskItemOverdue{ background-color: var(--color-task-overdue--); } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .CheckBox{ position: relative; display: inline-block; width: 50px; height: 50px; background-repeat: no-repeat; background-size: 24px 24px; background-position: 12px 13px; vertical-align: middle; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskCreationTime{ position: relative; display: inline-block; top: 0px; padding-left: 10px; padding-right: 10px; margin-right: 10px; margin-left: 10px; width: 150px; height: 30px; font-size: 14px; line-height: 30px; text-align: center; text-overflow: ellipsis; vertical-align: middle; /*background-color: var(--color-white--);*/ /*border-radius: 15px;*/ /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskStartTime{ position: relative; display: inline-block; top: 0px; padding-left: 10px; padding-right: 10px; margin-right: 10px; margin-left: 10px; width: 150px; height: 30px; font-size: 14px; line-height: 30px; text-align: center; text-overflow: ellipsis; vertical-align: middle; /*background-color: var(--color-white--);*/ /*border-radius: 15px;*/ /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskDueTime{ position: relative; display: inline-block; top: 0px; padding-left: 10px; padding-right: 10px; margin-right: 10px; margin-left: 10px; width: 150px; height: 30px; font-size: 14px; line-height: 30px; text-align: center; text-overflow: ellipsis; vertical-align: middle; /*background-color: var(--color-white--);*/ /*border-radius: 15px;*/ /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .ToolbarSpacer{ position: relative; display: inline-block; width: calc(100% - 788px); height: 30px; vertical-align: middle; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskStatusButton{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; width: 140px; height: 32px; vertical-align: middle; cursor: pointer; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskStatusTitle{ position: absolute; display: block; top: 0px; width: 100%; height: 30px; font-size: 16px; line-height: 30px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; border-radius: 15px; border: 1px var(--color-light-gray--) solid; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskStatusButton .Menu{ position: absolute; display: none; top: 42px; left: 0px; width: 100%; min-height: 80px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ overflow: hidden; cursor: pointer; z-index: 1000; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskStatusButton .Menu .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskStatusButton .Menu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder{ position: relative; display: block; margin: 0 auto; margin-top: 40px; padding: 10px; top: 0px; left: 0px; width: calc(100% - 24px); min-height: 50px; height: auto; background-color: var(--color-lighter-gray--); border: 1px var(--color-light-gray--) solid; border-radius: 5px; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskTitleHolderFloatingTitle { position: absolute; display: block; margin: 0px; padding: 0px; top: -20px; left: 10px; width: calc(100% - 20px); height: 30px; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskTitleHolderFloatingTitle .TaskTitleHolderTitle { position: relative; display: block; margin: 0px; padding: 0px; padding-left: 15px; padding-right: 15px; width: 80px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; font-weight: bold; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); border-radius: 5px; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskTitle{ position: relative; display: block; margin: 0 auto; padding: 10px; top: 0px; left: 0px; width: calc(100% - 20px); min-height: 24px; height: auto; font-family: var(--primary-font--); font-size: 18px; line-height: 24px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 5px; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskDescriptionHolderTitle { position: relative; display: block; margin: 0px; margin-top: 10px; padding: 0px; padding-left: 15px; padding-right: 15px; top: 0px; left: 0px; width: auto; min-width: 100px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; font-weight: bold; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); border-radius: 5px; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskDescription{ position: relative; display: block; margin: 0 auto; padding: 10px; top: 0px; left: 0px; width: calc(100% - 20px); min-height: 24px; height: auto; font-family: var(--primary-font--); font-size: 18px; line-height: 24px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 5px; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskAssigneeHolderTitle{ position: relative; display: block; margin: 0px; margin-top: 10px; padding: 0px; padding-left: 15px; padding-right: 15px; top: 0px; left: 0px; width: auto; min-width: 100px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; font-weight: bold; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); border-radius: 5px; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskAssigneeList { position: relative; display: block; margin: 0 auto; top: 0px; left: 0px; width: 100%; min-height: 24px; height: auto; max-height: 170px; border: 1px var(--color-light-gray--) solid; border-radius: 5px; overflow-x: hidden; overflow-y: auto; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskAssigneeList .ListItem{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; text-align: center; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskAssigneeList .ListItem .AssigneeProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; left: 0px; height: 30px; width: 30px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 20px; border: 2px var(--color-white--) solid; background-color: var(--color-white--); vertical-align: middle; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskAssigneeList .ListItem .AssigneeName { position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 80px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); vertical-align: middle; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskOwnerHolderTitle{ position: relative; display: block; margin: 0px; margin-top: 10px; padding: 0px; padding-left: 15px; padding-right: 15px; top: 0px; left: 0px; width: auto; min-width: 100px; height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: start; font-weight: bold; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); background-color: var(--color-lighter-gray--); border-radius: 5px; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskOwnerList { position: relative; display: block; margin: 0 auto; top: 0px; left: 0px; width: 100%; min-height: 24px; height: auto; border: 1px var(--color-light-gray--) solid; border-radius: 5px; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskOwnerList .ListItem{ position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 40px; text-align: center; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskOwnerList .ListItem .OwnerProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; left: 0px; height: 30px; width: 30px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 20px; border: 2px var(--color-white--) solid; background-color: var(--color-white--); vertical-align: middle; } #TaskView .InnerHolder .TaskHolder .TaskInfoHolder .TaskOwnerList .ListItem .OwnerName { position: relative; display: inline-block; margin: 0px; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 80px); height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); vertical-align: middle; overflow: hidden; } @media only screen and (max-width: 1000px) and (min-width: 701px) { #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskCreationTime{ display: none; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .ToolbarSpacer{ width: calc(100% - 596px); } } @media only screen and (max-width: 700px) { #TaskView .Titlebar .Title{ width: calc(100% - 86px) !important; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .CheckBox{ display: none; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskCreationTime{ display: none; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskStartTime{ display: none; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskDueTime{ top: 5px; width: 145px; } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .ToolbarSpacer{ width: calc(100% - 300px); } #TaskView .InnerHolder .TaskHolder .TaskHolderToolbar .TaskStatusButton{ top: 5px; } } /* filename: ../app/css/views/TasksView.css */ #TasksView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--view-background-color--); } #TasksView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #TasksView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #TasksView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #TasksView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #TasksView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #TasksView .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #TasksView .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #TasksView .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #TasksView .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #TasksView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: center; background-color: var(--inner-holder-background-color--); overflow: hidden; } #TasksViewTabBar{ position: relative; display: block; margin: 0 auto; margin-top: 10px; width: calc(100% - 14px); height: 50px; text-align: left; } #TasksViewTabBar .TabBarMenuItem{ position: relative; display: inline-block; margin: 0px; margin-left: 2px; margin-right: 2px; padding: 0px; top: 0px; left: 0px; text-align: center; height: 48px; width: auto; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; border-top: 1px var(--color-light-gray--) solid; border-top-left-radius: 8px; border-top-right-radius: 8px; background-color: #ffffff; cursor: pointer; } #TasksViewTabBar .TabBarMenuItem.selected{ background-color: var(--primary-brand-color-blue--); } #TasksViewTabBar .TabBarMenuItem.selected:hover{ background-color: var(--primary-brand-color-blue--); } #TasksViewTabBar .TabBarMenuItem:hover{ background-color: var(--color-light-gray--); } #TasksViewTabBar .TabBarMenuItemIcon{ position: relative; display: inline-block; margin-right: 10px; margin-left: 10px; top: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #TasksViewTabBar .TabBarMenuItemTitle{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: auto; height: 30px; font-family: var(--primary-font--); font-size: 18px; line-height: 30px; text-align: left; vertical-align: middle; color: var(--primary-text-color-gray-); text-overflow: ellipsis; } #TasksViewTabBar .TabBarMenuItem.selected .TabBarMenuItemTitle{ color: #ffffff; } #TasksViewContainer{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 22px); height: calc(100% - 70px); background-color: #ffffff; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.2)); transform: translateZ(0); /* safari fix for drop shadow */ } #TasksView .Searchbar{ position: relative; display: block; margin-left: 5px; margin-right: 5px; padding: 0px; padding-top: 5px; top: 0px; left: 0px; width: calc(100% - 10px); height: 60px; border-bottom: 1px var(--primary-brand-color-blue--) solid; } #TasksView .Searchbar .SearchBarHolder{ position: relative; display: block; margin: 0px; padding: 0px; top: 8px; left: 0px; width: 100%; height: 100%; text-align: left; } #TasksView .Searchbar .SearchBarHolder .GroupByControlsHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 250px; height: 40px; /*border: 1px var(--color-light-gray--) solid;*/ vertical-align: middle; } #TasksView .Searchbar .SearchBarHolder .GroupByControlsHolder .Title{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; max-width: 110px; min-width: 80px; width: auto; height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #TasksView .Searchbar .SearchBarHolder .GroupByControlsHolder .Button{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 100px; height: 40px; background-color: var(--primary-brand-color-blue--); vertical-align: middle; border-radius: 20px; cursor: pointer; } #TasksView .Searchbar .SearchBarHolder .GroupByControlsHolder .Button:active{ background-color: var(--primary-brand-color-dark-blue--); } #TasksView .Searchbar .SearchBarHolder .GroupByControlsHolder .ButtonTitle{ position: absolute; display: block; padding-left: 10px; padding-right: 10px; width: 100px; height: 40px; top: 0px; lefT: 0px; font-size: 16px; line-height: 40px; text-align: center; text-overflow: ellipsis; color: var(--color-white--); overflow: hidden; } #TasksView .Searchbar .SearchBarHolder .GroupByControlsHolder .Menu{ position: absolute; display: none; top: 42px; left: 0px; width: 100%; min-height: 80px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ overflow: hidden; cursor: pointer; z-index: 1000; } #TasksView .Searchbar .SearchBarHolder .GroupByControlsHolder .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #TasksView .Searchbar .SearchBarHolder .GroupByControlsHolder .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #TasksView .Searchbar .SearchBarHolder .FilterControlsHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 250px; height: 40px; vertical-align: middle; } #TasksView .Searchbar .SearchBarHolder .FilterControlsHolder .Title{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; max-width: 110px; min-width: 50px; width: auto; height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #TasksView .Searchbar .SearchBarHolder .FilterControlsHolder .Button{ position: relative; display: inline-block; padding-left: 10px; padding-right: 10px; width: 100px; height: 40px; background-color: var(--primary-brand-color-blue--); /*border-bottom: 1px var(--primary-brand-color-blue--) solid;*/ vertical-align: middle; border-radius: 20px; cursor: pointer; } #TasksView .Searchbar .SearchBarHolder .FilterControlsHolder .Button:active{ background-color: var(--primary-brand-color-dark-blue--); } #TasksView .Searchbar .SearchBarHolder .FilterControlsHolder .ButtonTitle{ position: absolute; display: block; padding-left: 10px; padding-right: 10px; width: 100px; height: 40px; top: 0px; lefT: 0px; font-size: 16px; line-height: 40px; text-align: center; text-overflow: ellipsis; color: var(--color-white--); overflow: hidden; } #TasksView .Searchbar .SearchBarHolder .FilterControlsHolder .Menu{ position: absolute; display: none; top: 42px; left: 0px; width: 100%; min-height: 80px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ overflow: hidden; cursor: pointer; z-index: 1000; } #TasksView .Searchbar .SearchBarHolder .FilterControlsHolder .Menu .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #TasksView .Searchbar .SearchBarHolder .FilterControlsHolder .Menu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #TasksView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 300px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #TasksView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 15px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #TasksView .Searchbar .Space{ position: relative; display: inline-block; width: calc(100% - 1106px); height: 40px; vertical-align: middle; } #TasksView .Searchbar .SearchBarHolder .SearchField{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: 240px; height: 40px; vertical-align: middle; } #TasksView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #TasksView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 36px; padding-right: 36px; width: 240px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #TasksView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #TasksView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #TasksView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #TasksViewContainer #TasksViewTablesHolder{ position: relative; display: block; margin-top: 2px; margin-left: 5px; margin-right: 5px; padding: 0px; padding-top: 5px; top: 0px; left: 0px; width: calc(100% - 10px); height: calc(100% - 74px); overflow-x: hidden; overflow-y: auto; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable:last-child{ margin-bottom: 20px; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable{ position: relative; display: none; margin: 0 auto; margin-top: 50px; padding: 0px; padding-bottom: 10px; width: calc(100% - 2px); height: auto; min-height: 80px; background-color: var(--color-lighter-gray--); border: 1px var(--color-light-gray--) solid; border-radius: 20px; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TasksViewTableTitle{ position: relative; display: block; top: 0px; margin-top: 0px; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: left; font-weight: 400; background-color: var(--color-lighter-gray--); /*border-radius: 10px;*/ border-bottom: 1px var(--color-light-gray--) solid; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TasksViewTableTitle .TableName{ position: absolute; display: block; top: -24px; padding-left: 15px; padding-right: 15px; min-width: 140px; width: auto; height: 40px; font-size: 16px; line-height: 30px; font-weight: bold; text-align: center; text-overflow: ellipsis; background-color: var(--color-lighter-gray--); border-radius: 10px; overflow: hidden; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TasksViewTableTitle .TaskTitle{ position: relative; display: inline-block; padding-left: 60px; padding-right: 60px; width: calc(100% - 764px); height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TasksViewTableTitle .TaskStartTime{ position: relative; display: inline-block; width: 180px; height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TasksViewTableTitle .TaskDueDate{ position: relative; display: inline-block; width: 180px; height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TasksViewTableTitle .TaskStatus{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; width: 120px; height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TasksViewTableTitle .AssignedTo{ position: relative; display: inline-block; margin-left: 20px; margin-right: 20px; width: 100px; height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem{ position: relative; display: block; top: 0px; left: 0px; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 20px); height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItemOverdue{ background-color: var(--color-task-overdue--); } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem:hover{ background-color: var(--color-lighter-gray--); } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .CheckBox{ position: relative; display: inline-block; width: 50px; height: 50px; background-repeat: no-repeat; background-size: 24px 24px; background-position: 12px 12px; vertical-align: middle; overflow: hidden; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .CreatorProfilePicture{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 40px; border: 2px var(--color-white--) solid; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .AssigneeProfilePicture{ position: absolute; display: block; margin: 0px; padding: 0px; top: 8px; left: 0px; height: 30px; width: 30px; font-size: 14px; line-height: 30px; text-align: center; text-overflow: ellipsis; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; direction: ltr; border-radius: 40px; border: 2px var(--color-white--) solid; background-color: var(--color-white--); } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .AssignedToProfilePicturesHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; height: 50px; width: 110px; vertical-align: middle; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .Title{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: calc(100% - 724px); height: 50px; font-size: 16px; line-height: 50px; text-align: left; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .Description{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 140px; height: 50px; font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .TaskStartTime{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 160px; height: 50px; font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .TaskDueTime{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 160px; height: 50px; font-size: 16px; line-height: 50px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .TaskStatusButton{ position: relative; display: inline-block; top: 0px; margin-left: 10px; margin-right: 10px; width: 140px; height: 30px; vertical-align: middle; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .TaskStatusTitle{ position: absolute; display: block; top: 0px; width: 100%; height: 30px; font-size: 16px; line-height: 30px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; border: 1px var(--color-light-gray--) solid; border-radius: 15px; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .TaskStatusButton .Menu{ position: absolute; display: none; top: 42px; left: 0px; width: 100%; min-height: 80px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ overflow: hidden; cursor: pointer; z-index: 1000; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .TaskStatusButton .Menu .MenuItem{ position: relative; display: block; padding-left: 15px; padding-right: 15px; width: calc(100% - 30px); height: 40px; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); border-bottom: 1px var(--color-lighter-gray--) solid; overflow: hidden; } #TasksViewContainer #TasksViewTablesHolder .TasksViewTable .TaskItem .TaskStatusButton .Menu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #TasksViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #TasksViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } @media only screen and (max-width: 440px) { #TasksView .Searchbar .SearchBarHolder .SearchField{ position: relative; display: inline-block; margin-left: 5px; margin-right: 5px; width: 160px; } #TasksView .Searchbar .SearchField input[type=text]{ width: 160px; } #TasksView .Searchbar .Space{ width: calc(100% - 280px); } #TasksView .Searchbar .SearchButton{ margin-right: 5px; margin-left: 5px; top: 18px; font-size: 14px; width: 100px; } } @media only screen and (max-width: 700px) { #TasksViewTabBar .TabBarMenuItemTitle{ position: relative; display: none; } #TasksViewTabBar .TabBarMenuItemIcon{ margin-top: 8px; } } /* filename: ../app/css/views/NewsView.css */ #NewsView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; text-align: center; overflow: hidden; background-color: var(--view-background-color--); container-name: NewsView; container-type: inline-size; } #NewsView .Titlebar{ position: relative; display: block; top: 0px; left: 0px; margin:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #NewsView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #NewsView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #NewsView .Searchbar{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--searchbar-background-color--); border-bottom: 1px var(--searchbar-border-color--) solid; } #NewsView .Searchbar .SearchBarHolder{ position: relative; display: inline-block; margin: 0px; margin-top: 4px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 42px; text-align: left; vertical-align: middle; overflow: hidden; } #NewsView .Searchbar .SearchField{ position: relative; display: inline-block; margin-left: 10px; width: 220px; height: 40px; vertical-align: middle; } #NewsView #SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #NewsView .Searchbar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; transition: 0.2s; } #NewsView .Searchbar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #NewsView .Searchbar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #NewsView .Searchbar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #NewsView .Searchbar .SearchBarHolder .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; width: 280px; height: 38px; vertical-align: middle; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #NewsView .Searchbar .SearchBarHolder .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #NewsView .Searchbar .Space1{ position: relative; display: inline-block; width: calc(50% - 160px); height: 40px; vertical-align: middle; } #NewsView .Searchbar .Space2{ position: relative; display: inline-block; width: calc(50% - 385px); height: 40px; vertical-align: middle; } #NewsView #NewsViewArticleTable{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 104px); background-color: var(--inner-holder-background-color--); text-align: center; overflow-x: hidden; overflow-y: auto; } #NewsView #NewsViewArticleTable .EmptyNewsItem{ position: relative; display: block; top: calc(50% - 50px); left: 0px; margin:0px; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 50px; text-align: center; unicode-bidi: plaintext; text-overflow: ellipsis; } #NewsView .NewsArticle{ position: relative; display: block; padding: 0px; padding-top: 30px; margin: 0 auto; margin-top: 10px; margin-bottom: 10px; top: 0px; left: 0px; width: calc(100% - 2px); max-width: 800px; height: auto; text-align: center; overflow-x: hidden; overflow-y: auto; overflow-wrap:normal; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; overflow: hidden; } #NewsView .NewsArticle .NewsArticleDateHolder{ position: absolute; display: block; top: 0px; right: 0px; padding-right: 20px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: right; color: var(--primary-text-color-dark-gray--); background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; } #NewsView .NewsArticle img{ padding:5px; max-width: 98%; border-radius: 10px; } .NewsViewLoadingScreen{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: rgba(256, 255, 255, 0.2); overflow: hidden; } @container NewsView (max-width: 780px){ #NewsView .Searchbar{ height: 50px; } #NewsView .Searchbar .SearchBarHolder{ margin: 0 auto; margin-top: 5px; width: 100% } #NewsView .Searchbar .SearchField{ margin: 0 auto; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); } #NewsView .Searchbar .SearchField input[type=text]{ width: 100%; } #NewsView .Searchbar .SearchBarHolder .InfoHolder{ display: none; } #NewsView .Searchbar .SearchBarHolder .Space1{ width: 0px; } #NewsView .Searchbar .SearchBarHolder .Space2{ width: 0px; } } /* filename: ../app/css/views/SchedulingView.css */ #SchedulingView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: center; background-color: var(--view-background-color--); overflow: hidden; } #SchedulingView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #SchedulingView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #SchedulingView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 50px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #SchedulingView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: center; background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } /* filename: ../app/css/views/ChatView.css */ #ChatView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; font-family: var(--primary-font--); text-align: left; color: var(--primary-text-color-dark-gray--); background-color: var(--view-background-color--); overflow: hidden; } #ChatViewContactsHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 320px; height: 100%; vertical-align: top; overflow: hidden; background-color: var(--chat-view-contacts-holder-background-color--); border-right: 1px var(--color-border-gray--) solid; } .ChatViewContactsHolder_rtl{ border-right: unset !important; border-left: 1px var(--color-border-gray--) solid; } #ChatViewMessagesHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 321px); height: 100%; vertical-align: top; background-color:#ffffff; transform: translateZ(0); /* safari fix for gpu acceleration */ overflow: hidden; } #ChatViewContactsTitleBar{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; margin-bottom: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #ChatViewContactsTitleBarIconHolder{ position: relative; display: inline-block; margin: 10px; top: 2px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #ChatViewContactsTitleBarTextHolder{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 100px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: #ffffff; text-overflow: ellipsis; } #ChatViewContactsTitleBarNewChatButton{ position: relative; display: inline-block; margin: 10px; top:0px; width: 30px; height: 30px; background-image: url('/assets/images/icons/add_box_white.svg'); background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; vertical-align: middle; overflow: hidden; cursor: pointer; } #ChatViewContactsSearchBar { position: relative; display: block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--color-white--); border-bottom: 1px var(--color-light-gray--) solid; overflow: hidden; } #ChatViewContactsSearchBar .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 12px; right: 16px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #ChatViewContactsSearchBar .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #ChatViewContactsSearchBar input[type=text]{ position: relative; display: block; margin-left: 10px; margin-right: 10px; padding-left: 40px; padding-right: 40px; top: 5px; left: 0px; width: calc(100% - 20px); height: 40px; box-sizing: border-box; font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; } #ChatViewContactsSearchBar input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #ChatViewContactsSearchBar #ChatViewContactsSearchBarButton{ position: absolute; display: block; padding: 5px; margin: 0px; top: 10px; left: 16px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; cursor: pointer; } #ChatViewContactsSearchBar #ChatViewContactsSearchBarButton:hover{ background-color: var(--color-lighter-gray--); } #ChatViewGroupsHolder{ position: relative; display: block; padding: 0px; margin: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 104px); overflow-x: hidden; overflow-y: auto; } #ChatViewMessagesTitleBar { position: relative; display: block; top: 0px; left: 0px; margin-top:0px; margin-bottom: 0px; width: 100%; height: 50px; text-align: center; background-color: var(--primary-brand-color-blue--); border-bottom: 3px var(--primary-brand-color-light-blue--) solid; } #ChatViewMessagesTitleBarMobileBackButton{ position:relative; display: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 40px; height: 50px; background-image:url('assets/images/icons/arrow_back_white.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 5px 10px; vertical-align: middle; cursor: pointer; overflow: hidden; } .TitleBarMobileBackButton_rtl{ background-image:url('assets/images/icons/arrow_forward_white.svg') !important; } #ChatViewMessagesTitleBarInnerHolder{ position:relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; vertical-align: middle; } #ChatViewMessagesTitleBarPicture{ position: relative; display: inline-block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; left: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 25px; cursor: pointer; } #ChatViewMessagesTitleBarInnerHolder .Online{ border: 2px var(--color-button-green--) solid !important; } #ChatViewMessagesTitleBarTextHolder{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: calc(100% - 100px); height: 40px; vertical-align: middle; } #ChatViewMessagesTitleBarTitle{ position: absolute; display: block; top: 2px; left: 5px; right: 5px; width: calc(100% - 10px); height: 20px; font-family: var(--primary-font--); font-size: 18px; line-height: 20px; color: #ffffff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ChatViewMessagesTitleBarText{ position: absolute; display: block; top: 22px; left: 5px; right: 5px; width: calc(100% - 10px); height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; color: #ffffff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ChatViewMessagesTitleBarInnerHolder .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url(/assets/images/icons/menu_dots_white.svg); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #ChatViewMessagesTitleBarInnerHolder .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -160px; width: 180px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #ChatViewMessagesTitleBarInnerHolder .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #ChatViewMessagesTitleBarInnerHolder .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #ChatViewMessagesTitleBarInnerHolder .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #ChatViewMessagesTitleBarInnerHolder .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #ChatViewMessagesInnerHolder { position: relative; display: block; padding: 0px; margin: 0px; top: 0px; left: 0px; width: 100%; height: calc(100% - 102px); background: var(--chat-view-messages-inner-holder-background-color--); transform: translateZ(0); /* safari fix for gpu acceleration */ overflow-x: hidden; overflow-y: auto; direction: ltr; } #ChatViewMessagesInnerHolder .ChatMessagesPage{ position: relative; display: block; padding: 0px; margin: 0px; top: 0px; left: 0px; width: 100%; height: auto; } #ChatViewMessagesHolder .WithFooter{ height: calc(100% - 104px); } #ChatViewMessagesHolder .WithoutFooter{ height: calc(100% - 65px); } #ChatViewMessagesHolder .ChatViewMessagesDownArrowButton{ position: absolute; display: none; bottom: 60px; left: 10px; width: 40px; height: 40px; background-color: var(--primary-brand-color-blue--); background-image: url('/assets/images/icons/circle_down_white.svg'); background-repeat: no-repeat; background-size: 36px 36px; background-position: 2px 2px; border-radius: 23px; border: 3px var(--color-white--) solid; overflow: hidden; cursor: pointer; transition: 0.2s; } #ChatViewMessagesHolder .ChatViewMessagesDownArrowButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #ChatViewMessagesInnerHolderFileDropZone{ position: absolute; display: none; top: 53px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: rgba(255,255,255,0.7); overflow-x: hidden; pointer-events: none; } #ChatViewMessagesInnerHolderFileDropZoneIcon{ position: relative; display: block; margin: 0 auto; padding: 20px; top: calc(50% - 60px); left: 0px; width: 50px; height: 50px; background-image:url('assets/images/icons/cloud_upload_black.svg'); background-size: 50px 50px; background-repeat: no-repeat; background-position: 20px 15px; background-color: var(--color-white--); border-radius: 25px; border: 1px var(--color-light-gray--) solid; overflow: hidden; } .drag_disable_pointer_events{ pointer-events: none; } #ChatViewMessagesFooterBar { position: relative; display: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--color-lighter-gray--); border-bottom: 1px var(--color-light-gray--) solid; } #ChatViewMessagesPlaceholder { position: absolute; display: block; padding: 0px; margin: 0px; top: calc(50% - 25px); left: 20px; width: calc(100% - 40px); min-height: 50px; height: auto; font-family: var(--primary-font--); text-align: center; font-size: 16px; line-height: 20px; color: var(--primary-text-color-gray--); line-break: auto; overflow: hidden; } #ChatViewMessagesFooterBar input[type=text]{ position: absolute; display: block; top: 3px; left: 50px; width: calc(100% - 110px); height: 36px; padding: 12px 20px; padding-right: 50px; margin: 5px; box-sizing: border-box; font-size: 16px; line-height: 36px; background-color:#ffffff; outline: none; text-align: unset; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; outline: none; } #ChatViewMessagesFooterBar input[type=text]:focus{ background-color:#ffffff; outline: none; } #ChatViewMessagesFooterBar #ChatViewMessagesVoiceRecorderMenu{ position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 50px; background-color: var(--color-lighter-gray--); } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderPlayRecordingButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; left: 60px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/play_white.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 6px 6px; background-color: var(--color-recorder-button-green--); border-radius: 20px; border: 1px #ffffff solid; cursor: pointer; } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderPlayRecordingButton:active{ background-color: var(--color-recorder-button-dark-green--); } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderStopRecordingButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 10px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/stop_white.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 6px 6px; background-color: var(--color-recorder-button-red--); border-radius: 20px; border: 1px #ffffff solid; cursor: pointer; } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderStopRecordingButton:active{ background-color: var(--color-recorder-button-dark-red--); } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderSendRecordingButton{ position: absolute; display: block; padding: 5px; margin: 0px; top: 7px; right: 10px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/send_white.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 7px 6px; background-color: var(--color-button-blue--); border-radius: 20px; border: 1px #ffffff solid; cursor: pointer; } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderSendRecordingButton:active{ background-color: var(--color-button-dark-blue--); } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderDeleteRecordingButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; left: 10px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/delete_white.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 6px 6px; background-color: var(--color-recorder-button-red--); border-radius: 20px; border: 1px #ffffff solid; cursor: pointer; } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderDeleteRecordingButton:active{ background-color: var(--color-recorder-button-dark-red--); } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderStopPlaybackButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; left: 60px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/stop_white.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 6px 6px; background-color: var(--color-recorder-button-red--); border-radius: 20px; border: 1px #ffffff solid; cursor: pointer; } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderStopPlaybackButton:active{ background-color: var(--color-recorder-button-dark-red--); } #ChatViewMessagesVoiceRecorderMenu #ChatViewMessagesVoiceRecorderTimerHolder{ position: absolute; display: block; padding: 0px; margin: 0px; top: 0px; left: calc(50% - 80px); width: 160px; height: 50px; font-family: var(--primary-font--); text-align: center; font-size: 20px; line-height: 50px; color: var(--color-red--); overflow: hidden; } #ChatViewMessagesFooterBar #ChatViewMessagesSendButton{ position: absolute; display: block; padding: 5px; margin: 0px; top: 7px; right: 10px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/send_white.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 7px 6px; background-color: var(--color-button-blue--); border-radius: 20px; border: 1px #ffffff solid; cursor: pointer; } #ChatViewMessagesFooterBar #ChatViewMessagesSendButton:active{ background-color: var(--color-button-dark-blue--); } #ChatViewMessagesFooterBar #ChatViewMessagesRecordButton{ position: absolute; display: block; padding: 5px; margin: 0px; top: 7px; right: 10px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/mic_white.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 6px 6px; background-color: var(--primary-brand-color-blue--); border-radius: 20px; border: 1px #ffffff solid; cursor: pointer; } #ChatViewMessagesFooterBar #ChatViewMessagesRecordButton:active{ background-color: var(--primary-brand-color-dark-blue--); } #ChatViewMessagesFooterBar #ChatViewMessagesAddAttachmentButton{ position: absolute; display: block; padding: 5px; margin: 0px; top: 8px; left: 10px; width: 26px; height: 26px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/add_black.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 6px 6px; border-radius: 18px; transition: transform 0.2s; cursor: pointer; } #ChatViewMessagesFooterBar .Selected{ transform: rotate(-45deg); } #ChatViewMessagesFooterBar #ChatViewMessagesAddAttachmentButton:active{ background-color: var(--color-light-gray--); } #ChatViewMessagesAddAttachmentsMenu{ position: absolute; display: none; margin: 0px; padding: 0px; bottom: 55px; left: 5px; width: auto; height: auto; min-height: 50px; border-radius: 30px; background-color: var(--color-white--); border-radius: 10px; border: 1px var(--color-light-gray--) solid; overflow: hidden; filter: drop-shadow(0.5px 0.5px 0.5px rgb(0 0 0 / 0.1)); transform: translateZ(0); } .ChatViewAttachmentsMenu{ position: relative; display: block; margin: 0px; padding: 0px; width: auto; height: auto; min-height: 50px; background-color: var(--color-white--); overflow: hidden; } .ChatViewAttachmentsMenu .MenuItem{ position: relative; display: block; margin: 0px; padding: 0px; width: 170px; height: 50px; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } .ChatViewAttachmentsMenu .MenuItem:last-child{ border-bottom:none; } .ChatViewAttachmentsMenu .MenuItem:hover{ background-color: var(--color-light-gray--); } .ChatViewAttachmentsMenu .MenuItem .Icon{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 50px; height: 50px; background-size: 30px 30px; background-position: 10px 10px; background-repeat: no-repeat; vertical-align: middle; } .ChatViewAttachmentsMenu .MenuItem .Title{ position: relative; display: inline-block; margin: 0px; padding: 0px; width: 120px; height: 50px; font-family: var(--primary-font--); font-size: 16px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); line-height: 50px; vertical-align: middle; } #ChatViewMessagesAddEmojiButton{ position: absolute; display: block; padding: 5px; margin: 0px; top: 10px; right: 58px; width: 22px; height: 22px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/emoji_black.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 4px 4px; background-color: #ffffff; border-radius: 18px; cursor: pointer; } #ChatViewMessagesAddEmojiButton:active{ background-color: var(--color-light-gray--); } #ChatViewMessagesCameraPickerButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 9px; right: 56px; width: 24px; height: 24px; border-radius: 30px; color: #ffffff; background-image:url('assets/images/icons/camera_black.svg'); background-size: 24px 24px; background-repeat: no-repeat; background-position: 5px 5px; background-color: #ffffff; border-radius: 18px; cursor: pointer; } #ChatViewMessagesCameraPickerButton:active{ background-color: var(--color-light-gray--); } #ChatViewMessagesFooterEmojiMenu{ position: absolute; display: none; margin: 0px; padding: 0px; bottom: 56px; right: 8px; width: 330px; height: 330px; } #ChatViewPopupContactsContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #ChatViewPopupContactsContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } #ChatViewPopupMessagesContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } .ChatViewChatGroupPickerDialogContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } #ChatViewPopupMessagesContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } .ChatViewImageGalleryContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; /*background-color: rgba(0,0,0,0.9);*/ background-color: var(--color-lighter-gray--); overflow: hidden; } .ChatViewLoadingScreen{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 53px; left: 0px; width: 100%; height: calc(100% - 53px); background-color: rgba(255, 255, 255, 0.2); overflow: hidden; } .ChatViewLoadingScreen .paperplane{ background-color: unset; } @media only screen and (max-width: 700px) { #ChatViewContactsHolder{ display: block; width: 100%; } #ChatViewMessagesHolder{ display: none; width: 100%; } #ChatViewMessagesCameraPickerButton{ display: block; } #ChatViewMessagesTitleBarInnerHolder{ margin-left: 0px; width: calc(100% - 40px); } #ChatViewMessagesTitleBarMobileBackButton{ display: inline-block; } } /* filename: ../app/css/views/PreviewView.css */ #PreviewView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: left; background-color: var(--view-background-color--); overflow: hidden; } #PreviewView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #PreviewView .Titlebar .TitleBarBackButton{ position: relative; display: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 40px; height: 50px; background-image: url(assets/images/icons/arrow_back_white.svg); background-size: 30px 30px; background-repeat: no-repeat; background-position: 5px 10px; vertical-align: middle; cursor: pointer; overflow: hidden; } #PreviewView .Titlebar .TitleBarBackButton.TitleBarBackButton_rtl { background-image: url(assets/images/icons/arrow_forward_white.svg) !important; } #PreviewView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #PreviewView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #PreviewView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('/assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #PreviewView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #PreviewView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #PreviewView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #PreviewView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #PreviewView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--color-scheme-gray-l0--); overflow-x: hidden; overflow-y: auto; } #PreviewView .InnerHolder .PreviewViewer{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 41px); background-color: var(--color-scheme-white--); border: none; } #PreviewView .PDFHolder { position: relative; display: none; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 40px); direction: ltr !important; overflow: auto !important; /* Enable both horizontal and vertical scroll */ background-color: var(--color-scheme-gray-l0--); -webkit-overflow-scrolling: touch; } #PreviewView .InnerHolder center { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* flex-start is required for scrolling larger-than-screen content */ margin: 0; padding: 0; min-width: 100%; min-height: 100%; } #PreviewView .PDFCanvas{ display: block; margin: auto; margin-top: 20px; padding: 0px; height: auto !important; max-width: none !important; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.4)); box-sizing: border-box; } #PreviewView .PDFCanvas:last-child{ display: block; height: auto !important; max-width: none !important; margin-top: 20px; margin-bottom: 20px; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.4)); box-sizing: border-box; } #PreviewView img.PDFCanvas { display: block; margin: auto; margin-top: 20px; padding: 0px; height: auto !important; max-width: none !important; filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.4)); box-sizing: border-box; } #PreviewView .PageNumber { position: absolute; display: none; bottom: 45px; /* Center it properly */ left: 50%; transform: translateX(-50%); width: 100px; height: 30px; text-align: center; line-height: 30px; font-family: var(--primary-font--); font-size: 14px; font-weight: bold; direction: rtl; color: #fff; background-color: rgba(0, 0, 0, 0.7); /* Darker, semi-transparent */ border-radius: 15px; z-index: 10; pointer-events: none; /* User scrolls "through" it */ } #PreviewView .ZoomOutButton{ position: absolute; display: none; bottom: 80px; right: 12px; width: 30px; height: 30px; border-radius: 17px; background-color: var(--color-scheme-white--); background-image: url('/assets/images/icons/zoom_out_black.svg'); background-repeat: no-repeat; background-position: 5px 5px; background-size: 20px 20px; border: 2px var(--color-scheme-black--) solid; overflow: hidden; opacity: 0.8; cursor: pointer; } #PreviewView .ZoomInButton{ position: absolute; display: none; bottom: 160px; right: 12px; width: 30px; height: 30px; border-radius: 17px; background-color: var(--color-scheme-white--); background-image: url('/assets/images/icons/zoom_in_black.svg'); background-repeat: no-repeat; background-position: 5px 5px; background-size: 20px 20px; border: 2px var(--color-scheme-black--) solid; overflow: hidden; opacity: 0.8; cursor: pointer; } #PreviewView .Zoom{ position: absolute; display: none; bottom: 120px; right: 7px; width: 40px; height: 30px; text-align: center; line-height: 30px; font-family: var(--primary-font--); overflow: hidden; font-size: 13px; color: var(--primary-text-color-white--); background-color: var(--color-scheme-black--); border: 2px var(--color-scheme-black--) solid; border-radius: 17px; opacity: 0.8; overflow: hidden; } #PreviewView .FilenameEditorContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } #PreviewView .PreviewViewLoadingScreen{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; background-color: rgba(255, 255, 255, 0.8); z-index: 100; } #PreviewView .PreviewViewLoadingScreen .paperplane{ top: calc(50% - 95px); } #PreviewView .PreviewInfoHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; bottom: 0px; left: 0px; width: 100%; height: 40px; text-align: center; background-color: rgba(255, 255, 255, 0.8); border-top: 1px var(--color-scheme-gray-l1--) solid; overflow: hidden; } #PreviewView .PreviewInfoHolder .FileSize{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100px; height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: center; direction: ltr; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #PreviewView .PreviewInfoHolder .ProfileHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; vertical-align: middle; width: calc(100% - 230px); height: 40px; } #PreviewView .PreviewInfoHolder .ProfileInnerHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; vertical-align: middle; width: auto; max-width: 100%; height: 40px; } #PreviewView .PreviewInfoHolder .ProfileHolder .ProfilePicture{ position: relative; display: inline-block; margin: 5px; padding: 0px; width: 30px; height: 30px; background-repeat: no-repeat; background-size: cover; border-radius: 20px; vertical-align: middle; } #PreviewView .PreviewInfoHolder .ProfileHolder .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: auto; max-width: calc(100% - 40px); height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #PreviewView .PreviewInfoHolder .CreationDate{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 130px; height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: inherit; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #PreviewView .InnerHolder .PreviewViewer img { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* Video Playback Styling */ #PreviewView .VideoHolder { position: relative; display: none; /* Hidden by default */ margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 40px); /* Matches PDFHolder and Viewer height */ background-color: var(--color-scheme-white--); z-index: 10; } #PreviewView .VideoHolder video { display: block; padding: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; outline: none; } /* Ensure the info holder stays on top if needed */ #PreviewView .InnerHolder .VideoHolder { z-index: 5; } #PreviewView .VideoControlButtonsHolder { position: absolute; display: none; /* Toggled to 'flex' by JS */ flex-direction: column; align-items: center; justify-content: flex-end; bottom: 45px; /* Sits above the PreviewInfoHolder */ left: 0px; width: 100%; height: auto; z-index: 30; pointer-events: none; padding-bottom: 10px; transition: 0.2s linear; opacity: 1; } #PreviewView .VideoTimebarContainer { display: flex; margin-top: 10px; flex-direction: row; align-items: center; justify-content: center; width: 100%; margin-bottom: 8px; pointer-events: auto; } #PreviewView .VideoTimebarContainer .TimeLabel { font-family: var(--primary-font--); font-size: 12px; color: var(--primary-text-color-white--); width: 45px; text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); } #PreviewView .VideoTimebarContainer .ProgressTrack { position: relative; width: 200px; /* Requested fixed width */ height: 6px; background-color: rgba(255, 255, 255, 0.3); border-radius: 3px; margin: 0 10px; cursor: pointer; } #PreviewView .VideoTimebarContainer .ProgressBar { position: absolute; left: 0; top: 0; height: 100%; background-color: var(--color-scheme-white--); border-radius: 3px; width: 0%; pointer-events: none; } #PreviewView .VideoTimebarContainer .ProgressCursor { position: absolute; top: 50%; left: 0%; width: 12px; height: 12px; background-color: var(--color-scheme-white--); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0px 0px 4px rgba(0,0,0,0.5); pointer-events: none; } /* Rest of the CSS remains the same as previously provided */ #PreviewView .VideoControlButtonsHolder .VideoControlButtonsInnerHolder { position: relative; display: inline-block; margin: 0 auto; padding: 4px; width: auto; height: 75px; text-align: center; background-color: rgba(0,0,0,0.8); border-radius: 10px; pointer-events: auto; /* Buttons are clickable */ box-shadow: 0px 2px 5px rgba(0,0,0,0.5); overflow: hidden; } #PreviewView .VideoControlButtonsHolder .VideoButton { position: relative; display: inline-block; margin-top: 7px; margin-left: 10px; margin-right: 10px; padding: 5px; width: 32px; height: 32px; vertical-align: middle; background-position: center; background-repeat: no-repeat; background-size: 30px 30px; background-color: var(--color-scheme-black--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; cursor: pointer; } #PreviewView .VideoControlButtonsHolder .PlayPauseButton.playing { background-image: url('/assets/images/icons/pause_white.svg'); /* Update paths as needed */ } #PreviewView .VideoControlButtonsHolder .PlayPauseButton.paused { background-image: url('/assets/images/icons/play_white.svg'); } #PreviewView .VideoControlButtonsHolder .MuteButton.muted { background-image: url('/assets/images/icons/volume_off_white.svg'); } #PreviewView .VideoControlButtonsHolder .MuteButton.unmuted { background-image: url('/assets/images/icons/volume_up_white.svg'); } @media only screen and (max-width: 780px) { } @media only screen and (hover: hover) and (min-width: 781px){ #PreviewView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } } @media print { #PreviewView .Titlebar, #PreviewView .NextButton, #PreviewView .PrevButton, #PreviewView .PageNumber, #PreviewView .ZoomInButton, #PreviewView .ZoomOutButton, #PreviewView .Zoom, #PreviewView .PreviewInfoHolder { display: none !important; } #PreviewView .InnerHolder { height: auto !important; overflow: visible !important; } #PreviewView .PDFHolder { display: block !important; position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; overflow: visible !important; } #PreviewView .PDFCanvas { max-width: 100% !important; height: auto !important; } } /* filename: ../app/css/views/CallView.css */ #CallViewPopupContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } #CallViewPopupContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } #application_container .MiniCallView{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: calc(100% - 320px); left: calc(100% - 480px); width: 480px; height: 320px; background-color: var(--color-white--); border: 2px var(--color-scheme-white--) solid; border-radius: 10px; overflow: hidden; container-name: MiniCallView; container-type: inline-size; } #CallView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; text-align: center; overflow-x: hidden; overflow-y: hidden; background-color: var(--color-scheme-black--); transition: 0.2s; container-name: CallView; container-type: inline-size; } #CallView .ApplicationTitlebar{ position: relative; display: inline-block; top: 0px; left: 0px; padding-right: 0px; padding-left: 0px; width: 100%; height: 60px; text-align: left; direction: ltr; border-bottom: 1px var(--application-title-bar-border-color--) solid; line-height: 38px; background-color: var(--color-scheme-white--); } #CallView .ApplicationTitlebar .LogoText{ position: relative; display: inline-block; margin-top: 10px; margin-left: 12px; margin-right: 12px; top: 0px; left: 0px; width: auto; height: 100%; font-family: var(--primary-brand-font--); font-size: 32px; line-height: 40px; text-align: inherit; color: var(--application-titlebar-logo-text-color--); } #CallView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #CallView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; padding: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #CallView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 140px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #CallView .Titlebar .TitlePictureInPictureButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; margin-right: 6px; margin-left: 6px; height: 50px; width: 30px; vertical-align: middle; background-position: 0px 0px; background-image: url('/assets/images/icons/picture_in_picture_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #CallView .Titlebar .TitleChatButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; margin-right: 6px; margin-left: 6px; height: 50px; width: 30px; vertical-align: middle; background-position: 0px 2px; background-image: url('/assets/images/icons/chat_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor:auto; opacity: 0.0; pointer-events: none; } #CallView > .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 113px); text-align: center; background-color: var(--chat-call-view-inner-holder-background-color-); overflow: hidden; } #CallView .InnerHolderMinimized{ height: calc(100% - 53px); } #CallView .CallInfoHolder{ position: absolute; display: block; top: calc(50% - 150px); left: 0px; padding: 0px; width: 100%; height: 200px; text-align: center; } #CallView .CallInfoHolder .ProfilePicture{ position: relative; display: block; margin: 0 auto; margin-bottom:20px; padding: 0px; top: 0px; left: 0px; height: 150px; width: 150px; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border: 2px var(--color-scheme-white--) solid; border-radius: 77px; } #CallView .CallInfoHolder .CallInfoTextHolder{ position: relative; display: none; margin: 0 auto; padding: 0px; width: auto; max-width: 280px; height: 40px; font-family: var(--primary-font--); font-size: 22px; line-height: 40px; text-align: center; color: var(--primary-text-color-white--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CallView .CallInfoHolder .Name{ position: relative; display: block; margin: 0 auto; padding: 0px; width: auto; max-width: 280px; height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: center; color: var(--primary-text-color-white--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CallView .CallInfoHolder .CallTimerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: auto; max-width: 280px; height: 40px; font-family: var(--primary-font--); font-size: 18px; line-height: 40px; text-align: center; color: var(--primary-text-color-white--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #CallView .InnerHolder .SwitchCameraButton{ position: absolute; display: none; top: 10px; right: 10px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-image: url('/assets/images/icons/camera_switch_white.svg'); background-color: var(--color-scheme-black--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; overflow: hidden; opacity: 0.6; transform: rotate(0deg); transition: transform 0.3s ease; cursor: pointer; } #CallView .InnerHolder .SwitchToBackCamera{ transform: rotate(360deg); } #CallView .CallControlButtonsHolder{ position: absolute; display: block; bottom: 10px; left: 0px; width: 100%; height: 70px; text-align: center; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: auto; height: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.7); border-radius: 35px; border: 1px solid rgba(255, 255, 255, 0.2); } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AudioOutputMenuButton{ position: relative; display: inline-block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-color: var(--color-scheme-black--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; cursor: pointer; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AudioOutputMenuButton.earpiece{ background-image: url('/assets/images/icons/earpiece_white.svg'); } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AudioOutputMenuButton.speaker{ background-image: url('/assets/images/icons/speaker_white.svg'); } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AudioOutputMenuButton.bluetooth{ background-image: url('/assets/images/icons/bluetooth_white.svg'); } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AudioOutputMenuButton .AudioOutputMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; bottom: 64px; left: -10px; width: 70px; min-height: 100px; height: auto; background-color: var(--color-scheme-black--); overflow: hidden; border-radius: 35px; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AudioOutputMenuButton .AudioOutputMenu .MenuItem{ position: relative; display: block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-color: var(--color-scheme-black--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; cursor: pointer; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AudioOutputMenuButton .AudioOutputMenu .MenuItem.Speaker{ background-image: url('/assets/images/icons/speaker_white.svg'); } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AudioOutputMenuButton .AudioOutputMenu .MenuItem.Earpiece{ background-image: url('/assets/images/icons/earpiece_white.svg'); } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AudioOutputMenuButton .AudioOutputMenu .MenuItem.Bluetooth{ background-image: url('/assets/images/icons/bluetooth_white.svg'); } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .AnswerButton{ position: relative; display: inline-block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-image: url('/assets/images/icons/call_white.svg'); background-color: var(--color-button-green--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; overflow: hidden; cursor: pointer; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .RejectButton{ position: relative; display: inline-block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-image: url('/assets/images/icons/call_end_white.svg'); background-color: var(--color-button-red--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; overflow: hidden; cursor: pointer; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .CallButton{ position: relative; display: inline-block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-image: url('/assets/images/icons/call_white.svg'); background-color: var(--color-button-green--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; overflow: hidden; cursor: pointer; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .VideoCallButton{ position: relative; display: inline-block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-image: url('/assets/images/icons/call_videocam_white.svg'); background-color: var(--color-button-green--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; overflow: hidden; cursor: pointer; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .HangupButton{ position: relative; display: inline-block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-image: url('/assets/images/icons/call_end_white.svg'); background-color: var(--color-button-red--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; overflow: hidden; cursor: pointer; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .MuteButton{ position: relative; display: inline-block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-image: url('/assets/images/icons/mic_white.svg'); background-color: var(--color-scheme-black--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; overflow: hidden; cursor: pointer; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .ShareScreenButton{ position: relative; display: inline-block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-image: url('/assets/images/icons/share_screen_white.svg'); background-color: var(--color-scheme-black--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; overflow: hidden; cursor: pointer; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .CloseButton{ position: relative; display: inline-block; margin: 8px; margin-left:8px; margin-right:8px; padding: 0px; width: 50px; height: 50px; vertical-align: middle; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; background-image: url('/assets/images/icons/cancel_circle_white.svg'); background-color: var(--color-button-red--); border: 2px var(--color-scheme-white--) solid; border-radius: 27px; overflow: hidden; cursor: pointer; } /*******************************************/ #CallView > .InnerHolder .VideoHolder { position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-scheme-black--); transition: 0.2s linear; overflow: hidden; } #CallView > .InnerHolder .MiniVideoHolder { position: absolute !important; display: block !important; top: unset; left: unset; bottom: 2px !important; right: 2px !important; height: 170px; width: 302px; border: 2px var(--color-scheme-white--) solid; border-radius: 10px; overflow: hidden; } #CallView > .InnerHolder .RemoteVideo{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; object-fit: cover; object-fit:contain; object-position:center; overflow: hidden; } #CallView > .InnerHolder .LocalVideo{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; object-fit: cover; overflow: hidden; } #CallView .InnerHolder .LowReceptionWarningBanner{ position: absolute; display: none; top: 10px; padding-top: 5px; padding-left: 10px; padding-right: 10px; left: calc(50% - 130px); width: 240px; height: 38px; font-family: var(--primary-font--); font-size: 14px; line-height: 16px; text-align: left; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-yellow--); border-radius: 10px; border: 2px var(--color-scheme-white--) solid; overflow: hidden; } #CallView .InnerHolder .LowReceptionWarningBanner .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 20px; height: 28px; background-image: url('/assets/images/icons/warning_black.svg'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } #CallView .InnerHolder .LowReceptionWarningBanner .Text{ position: relative; display: inline-block; margin: 0 auto; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 40px); height: 38px; font-family: var(--primary-font--); font-size: 14px; line-height: 16px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-yellow--); vertical-align: middle; overflow: hidden; } /* Portrait mode */ @media (orientation: portrait) { #CallView > .InnerHolder .RemoteVideo { position: absolute !important; /*height: 100vh !important;*/ /*width: calc(100vh * (16 / 9)) !important; */ left: 45% !important; top: 0 !important; transform: translateX(-45%) !important; /* Center the video horizontally */ object-fit: cover !important; aspect-ratio: 16 / 9; } #CallView > .InnerHolder .MiniVideoHolder { height: 120px !important; width: 68px !important; } } @container CallView (max-width: 479px){ #CallView .Titlebar .TitlePictureInPictureButton{ opacity: 0.0; pointer-events: none; } } @container MiniCallView (max-width: 480px){ #CallView .ApplicationTitlebar{ display: none; } #CallView .CallInfoHolder{ top: 20px; } #CallView .CallInfoHolder .ProfilePicture{ margin-bottom:10px; height: 100px; width: 100px; border-radius: 52px; } #CallView .CallInfoHolder .CallInfoTextHolder{ height: 20px; font-size: 16px; line-height: 20px; } #CallView .CallInfoHolder .Name{ height: 20px; font-size: 16px; line-height: 20px; } #CallView .CallInfoHolder .CallTimerHolder{ height: 20px; font-size: 16px; line-height: 20px; } #CallView .CallControlButtonsHolder{ bottom: 0px !important; } #CallView > .InnerHolder .MiniVideoHolder { height: 68px; width: 120px; } #CallView .Titlebar .TitleChatButton{ opacity: 1.0; pointer-events: all; cursor:pointer; } } @media only screen and (max-height: 500px) { #CallView .CallInfoHolder .ProfilePicture{ margin-bottom:10px; height: 100px; width: 100px; border-radius: 52px; } } @media only screen and (max-width: 780px) { #CallView .ApplicationTitlebar{ display: none; } #CallView .Titlebar{ display: none; } #CallView .Titlebar .TitlePictureInPictureButton{ opacity: 0.0; pointer-events: none; } #CallView .CallControlButtonsHolder .CallControlButtonsInnerHolder .ShareScreenButton{ display: none !important; } #CallView .ApplicationTitlebar{ height: 45px; background-color: var(--color-scheme-white--); } #CallView .ApplicationTitlebar .LogoText{ position: absolute; display: block; margin-top: 3px; margin-left: 10px; margin-right: 10px; top: 0px; left: 0px; width: auto; height: 100%; font-family: var(--primary-brand-font--); font-size: 28px; line-height: 28px; text-align: right; color: var(--application-titlebar-logo-text-color--); line-height: 40px; text-align: center; } #CallView .InnerHolderMinimized{ height: calc(100% - 100px); } #CallView > .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 98px); text-align: center; background-color: var(--chat-call-view-inner-holder-background-color-); overflow: hidden; } #CallView > .InnerHolder{ height: 100%; } #CallView > .InnerHolder .RemoteVideo { object-fit: contain; } #CallView > .InnerHolder .MiniVideoHolder { height: 68px; width: 120px; } } @media only screen and (hover: hover) and (min-width: 781px){ } /* filename: ../app/css/views/HomeView.css */ #HomeView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; overflow: hidden; font-family: var(--primary-font--); color: var(--color-dark-gray--); background-color: #ffffff; } #HomeView .InnerHolder{ position: relative; display: block; margin: 0 auto; top: calc(50% - 220px); padding: 0px; width: 600px; height: 400px; overflow: hidden; } #HomeView .InnerHolder .HeaderText{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 70%; height: auto; padding: 10px; margin-top: 20px; margin-bottom: 20px; font-family: var(--primary-brand-font--); font-size: 70px; line-height: 70px; text-align: center; unicode-bidi: plaintext; color: var(--primary-brand-color-blue--); } #HomeView .InnerHolder .SecondaryHeaderText{ position: relative; display: block; top: 0px; left: 0px; width: calc(100% - 20px); height: auto; padding: 10px; margin-bottom: 20px; font-size: 24px; line-height: 36px; font-weight: normal; text-align: center; unicode-bidi: plaintext; } #HomeView .InnerHolder .LoginButton{ position: relative; display: inline-block; min-width: 300px; height: 50px; padding: 12px 20px; margin: 20px 0; box-sizing: border-box; font-size: 18px; line-height: 25px; border: 1px var(--primary-brand-color-blue--) solid; border-radius: 30px; background-color: var(--primary-brand-color-blue--); color: #ffffff; cursor: pointer; transition: 0.3s; } #HomeView .InnerHolder .LoginButton:hover{ background-color: var(--primary-brand-color-dark-blue--); transition: 0.3s; } @media only screen and (max-height: 490px) { #HomeView { overflow-y: auto; } #HomeView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; width: 100%; height: auto; min-height: 100%; overflow: hidden; } } @media only screen and (max-height: 490px) and (max-width: 780px) { #HomeView .InnerHolder{ top: 0px } #HomeView .InnerHolder .HeaderText{ margin-top: 0px !important; } } @media only screen and (max-width: 780px) { #HomeView .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; top: 0px; width: 100%; height: auto; min-height: 100%; overflow: hidden; } #HomeView .InnerHolder .HeaderText{ font-size: 36px; line-height: 30px; margin-top: 40px; } #HomeView .InnerHolder .SecondaryHeaderText{ font-size: 18px; line-height: 22px; width: calc(100% - 40px); } #HomeView .InnerHolder .LoginButton{ min-width: 240px; height: 50px; padding: 12px 20px; margin: 20px 0; box-sizing: border-box; font-size: 16px; line-height: 22px; } } /* filename: ../app/css/views/DashboardView.css */ #DashboardView{ position: relative; display: block; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; text-align: left; background-color: var(--view-background-color--); overflow-x: hidden; overflow-y: hidden; container-name: DashboardView; container-type: inline-size; } #DashboardView .Titlebar{ position: relative; display: block; top: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #DashboardView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #DashboardView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px; width: calc(100% - 90px) !important; height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: left; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; text-align: start; unicode-bidi: plaintext; } #DashboardView .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; margin-right: 2px; padding: 0px; top: 0px; right: 0px; height: 50px; width: 38px; vertical-align: middle; background-position: 8px 13px; background-image: url('/assets/images/icons/dashboard_customize_white.svg'); background-repeat: no-repeat; background-size: 24px 24px; cursor: pointer; } #DashboardView .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 56px; left: -238px; width: 270px; min-height: 50px; height: auto; background-color: var(--color-superlight-gray--); /* border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; */ filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ border-radius: 10px; overflow: hidden; z-index: 1000; } #DashboardView .TitleBarMenuItemsHolder{ position: relative; display: block; margin: 0 auto; margin-top: 1px; margin-bottom: 1px; padding: 0px; width: 100%; height: auto; /*max-height: 225px;*/ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; /*border-bottom: 1px var(--color-light-gray--) solid;*/ filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.3)); overflow-x: hidden; overflow-y: auto; } #DashboardView .TitleBarMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; background-color: var(--color-white--); border-bottom: 1px var(--color-lighter-gray--) solid; cursor: pointer; } #DashboardView .TitleBarMenu .MenuItem .DragIcon{ position: relative; display: inline-block; margin: 10px 0px 10px 0px; top: 0px; left: 0px; width: 0px; height: 30px; vertical-align: middle; background-image: url('/assets/images/icons/drag_indicator_black.svg'); background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; opacity: 0.0; transition: 0.3s; } #DashboardView .TitleBarMenu .MenuItem .Icon{ position: relative; display: inline-block; margin: 0px 10px 0px 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; transition: 0.3s; } #DashboardView .TitleBarMenu .MenuItem .ItemTitle { position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 100px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; transition: 0.3s; } #DashboardView .TitleBarMenu .MenuItem .ToggleButton{ position: relative; display: inline-block; margin: 0 auto; top: 0px; left: 0px; width: 50px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 10px 3px; cursor: pointer; } #DashboardView .TitleBarMenu .MenuItem .on{ background-image: url('/assets/images/icons/toggle_on_black.svg'); } #DashboardView .TitleBarMenu .MenuItem .off{ background-image: url('/assets/images/icons/toggle_off_black.svg'); } #DashboardView .TitleBarMenu .FooterMenuItem { position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-light-gray--) solid; cursor: pointer; } #DashboardView .TitleBarMenu .FooterMenuItem .FooterTitle { position: relative; display: inline-block; margin: 0px 20px 0px 20px; padding: 0px; top: 0px; left: 0px; width: calc(100% - 92px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; text-overflow: ellipsis; color: var(--primary-text-color-dark-gray--); vertical-align: middle; transition: 0.3s; } #DashboardView .TitleBarMenu .FooterMenuItem .Icon{ position: relative; display: inline-block; margin: 0px 10px 0px 0px; top: 0px; left: 0px; width: 40px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 10px 3px; transition: 0.3s; } #DashboardView .InnerHolder { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: center; background-color: var(--color-scheme-white--); overflow-x: hidden; overflow-y: auto; } #DashboardView .WithoutUserBackground{ background-image: url('/assets/images/views/dashboardview/background.png'); background-repeat:repeat; background-size: 150px 150px; } #DashboardView .WithUserBackground{ background-color: var(--inner-holder-background-color--) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; } .DashboardViewWidgetsContainer{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 5px; width: 1056px; height: auto; min-height: calc(100% - 10px); text-align: left; overflow-x: hidden; overflow-y: auto; /*background-color: var(--color-white--);*/ container-name: DashboardViewWidgetsContainer; container-type: inline-size; } @media only screen and (max-width: 1260px) { .DashboardViewWidgetsContainer{ width: 704px !important; } } @media only screen and (max-width: 820px) { .DashboardViewWidgetsContainer { min-width: 340px !important; max-width: 640px; padding: 0px; padding-top: 5px; text-align: center !important; min-height: calc(100% - 5px); width:100% !important; } .DashboardWidget{ margin: 0 auto; width: calc(100% - 20px) !important; } } @media only screen and (max-width: 780px){ #DashboardView .TitleBarMenu .FooterMenuItem{ background-color: var(--color-lighter-gray--); } #DashboardView .TitleBarMenu .MenuItem .DragIcon{ opacity: 1.0; width: 30px; } #DashboardView .TitleBarMenu .MenuItem .ItemTitle { width: 140px; } #DashboardView .TitleBarMenu .MenuItem .Icon{ width: 30px; background-position: 3px 3px; } } @media only screen and (hover: hover) and (min-width: 781px){ #DashboardView .TitleBarMenu .MenuItem:hover{ background-color: var(--color-lighter-gray--); } #DashboardView .TitleBarMenu .FooterMenuItem:hover{ background-color: var(--color-lighter-gray--); } #DashboardView .TitleBarMenu .MenuItem:hover .DragIcon{ opacity: 1.0; width: 30px; } #DashboardView .TitleBarMenu .MenuItem:hover .ItemTitle { width: 140px; } #DashboardView .TitleBarMenu .MenuItem:hover .Icon{ width: 30px; background-position: 3px 3px; } } @container DashboardView (width > 1151px){ .DashboardViewWidgetsContainer{ width: 1140px !important; } .DashboardWidget{ margin: 20px !important; } } @container DashboardView (width > 1760px){ .DashboardViewWidgetsContainer { width: 1760px !important; } .DashboardWidget{ width: 400px !important; } } /* filename: ../app/css/views/ClouddriveView.css */ #ClouddriveView{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; text-align: left; background-color: var(--view-background-color--); overflow: hidden; container-name: ClouddriveView; container-type: inline-size; } #ClouddriveView .Titlebar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: left; background-color: var(--titlebar-background-color--); border-bottom: 3px var(--titlebar-border-color--) solid; } #ClouddriveView .Titlebar .TitleBarBackButton{ position: relative; display: none; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 40px; height: 50px; background-image: url('assets/images/icons/arrow_back_white.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 5px 10px; vertical-align: middle; cursor: pointer; overflow: hidden; } #ClouddriveView .Titlebar .TitleBarBackButton.TitleBarBackButton_rtl { background-image: url('assets/images/icons/arrow_forward_white.svg') !important; } #ClouddriveView .Titlebar .Icon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:cover; background-repeat: no-repeat; background-position: 0px 0px; } #ClouddriveView .Titlebar .Title{ position: relative; display: inline-block; top: 0px; margin-top: 10px; margin-bottom: 10px;; width: calc(100% - 86px); height: 30px; font-family: var(--primary-font--); font-size: 20px; line-height: 30px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--titlebar-title-text-color--); text-overflow: ellipsis; } #ClouddriveView .Titlebar .TitleMenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; right: 6px; height: 50px; width: 36px; vertical-align: middle; background-position: 6px 0px; background-image: url('assets/images/icons/menu_dots_white.svg'); background-repeat: no-repeat; background-size: 30px 50px; cursor: pointer; } #ClouddriveView .Titlebar .TitleMenuButton .TitleBarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 53px; left: -180px; width: 200px; min-height: 50px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ z-index: 1000; } #ClouddriveView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 50px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #ClouddriveView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemIcon{ position: relative; display: inline-block; margin: 10px; top: 0px; left: 0px; width: 30px; height: 30px; vertical-align: middle; background-size:24px 24px; background-repeat: no-repeat; background-position: 3px 3px; } #ClouddriveView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem .ItemTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 50px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #ClouddriveView > .InnerHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #ClouddriveView .InnerHolder .SidebarHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 260px; height: 100%; text-align: inherit; background-color: var(--inner-holder-background-color--); overflow-x: hidden; overflow-y: auto; } #ClouddriveView .InnerHolder .SidebarHolder .Sidebar{ position: relative; display: block; margin: 0 auto; margin-top: 100px; padding: 0px; width: 100%; height: auto; min-height: 200px; } #ClouddriveView .InnerHolder .SidebarHolder .Sidebar .SidebarFolderListHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; } #ClouddriveView .InnerHolder .FoldersInfoHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; bottom: 0px; left: 0px; width: 100%; height: auto; min-height: 20px; border-top: 1px var(--color-scheme-gray-l1--) solid; } #ClouddriveView .InnerHolder .FoldersInfoHolder .InfoItem{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; top: 0px; left: 0px; width: calc(100% - 20px); min-height: 20px; font-family: var(--primary-font--); font-size: 12px; line-height: 20px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #ClouddriveView .InnerHolder .ListTitle{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 10px; padding: 0px; padding-left: 10px; padding-right: 10px; height: 40px; width: calc(100% - 60px); font-family: var(--primary-font--); font-size: 16px; font-weight: bold; line-height: 40px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } #ClouddriveView .InnerHolder .FolderItem{ position: relative; display: block; margin: 0 auto; margin-bottom: 10px; padding: 0px; padding-left: 20px; padding-right: 20px; width: calc(100% - 60px); height: auto; min-height: 40px; border-radius: 20px; cursor: pointer; } #ClouddriveView .InnerHolder .FolderItem.Selected{ background-color: var(--color-scheme-blue-l6--); } #ClouddriveView .InnerHolder .FolderItem:hover{ background-color: var(--color-scheme-gray-l1--); } #ClouddriveView .InnerHolder .FolderItem .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 40px; background-position: 5px 4px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: top; } #ClouddriveView .InnerHolder .FolderItem .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; height: 40px; width: calc(100% - 40px); font-family: var(--primary-font--); font-size: 15px; line-height: 40px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } #ClouddriveView .InnerHolder .ListHolder .FolderItem.Selected .Title{ font-weight: bold; } #ClouddriveView .InnerHolder .FoldersHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 260px); height: 100%; text-align: inherit; background-color: var(--inner-holder-background-color--); overflow: hidden; } #ClouddriveView .InnerHolder .NavigationBarHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; text-align: inherit; background-color: var(--inner-holder-background-color--); } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 100%; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarIcon { position: relative; display: inline-block; width: 40px; height: 50px; background-position: 5px 10px; background-size: 30px 30px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarTitleHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 200px; height: 50px; vertical-align: top; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: auto; max-width: 200px; height: 50px; font-family: var(--primary-font--); font-weight: bold; font-size: 18px; line-height: 50px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle.NavigationBarTitle_rtl{ } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .Space1{ position: relative; display: inline-block; width: calc(50% - 390px); height: 40px; vertical-align: middle; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .InfoHolder{ position: relative; display: inline-block; margin-left: 10px; margin-right: 10px; margin-top: 5px; top: 0px; left: 0px; width: 280px; height: 38px; vertical-align: top; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 20px; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .Space2{ position: relative; display: inline-block; width: calc(50% - 380px); height: 40px; vertical-align: middle; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .InfoHolder .InfoText{ position: relative; display: inline-block; width: 100%; height: 38px; font-size: 16px; line-height: 38px; text-align: center; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchField{ position: relative; display: inline-block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 220px; height: 40px; vertical-align: middle; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchFieldSearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 5px; left: 6px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchField input[type=text]{ position: absolute; display: block; top: 0px; left: 0px; padding-left: 40px; padding-right: 40px; width: 220px; height: 40px; box-sizing: border-box; font-size: 16px; line-height: 38px; text-align: start; unicode-bidi: plaintext; background-color: var(--color-scheme-gray-l1--); color: var(--primary-text-color-dark-gray--); border: 1px solid var(--color-scheme-gray-l2--); border-radius: 10px; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchField input[type=text]:focus{ background-color: var(--color-light-gray--); outline: none; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 7px; right: 6px; width: 16px; height: 16px; border-radius: 14px; background-image: url('assets/images/icons/close_white.svg'); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--color-heavy-gray--); cursor: pointer; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchField .SearchBarClearButton:active{ background-color: var(--color-heavier-gray--); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: calc(100% - 53px); text-align: inherit; background-color: var(--color-scheme-white--); border-top-left-radius: 10px; border: 1px var(--color-scheme-gray-l2--) solid; overflow-x: hidden; overflow-y: auto; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer.FilesContainer_rtl{ border-top-right-radius: 10px; border-top-left-radius: 0px; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .PathHolder { position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 40px; height: auto; border-bottom: 1px var(--color-scheme-gray-l2--) solid; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .PathHolder .Path{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 40px; height: auto; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .PathHolder .Path .PathItem{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: auto; height: 40px; overflow: hidden; vertical-align: top; cursor: pointer; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .PathHolder .Path .PathItem .Separator{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 40px; background-image: url('assets/images/icons/arrow_right_black.svg'); background-size: 30px 30px; background-repeat: no-repeat; background-position: 0px 5px; vertical-align: top; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .PathHolder .Path .PathItem .Separator.Separator_rtl{ background-image: url('assets/images/icons/arrow_left_black.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .PathHolder .Path .PathItem .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: auto; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; overflow: hidden; vertical-align: top; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder{ position: relative; display: block; margin: 0 auto; padding: 10px; width: calc(100% - 20px); min-height: calc(100% - 71px); height: auto; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem{ position: relative; display: inline-block; margin: 0 auto; margin-bottom: 5px; padding: 0px; width: 110px; height: auto; vertical-align: top; transition: 0.2s linear; cursor: pointer; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 50px; height: 60px; background-position: center; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); overflow: hidden; transition: 0.2s linear; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.Image{ position: relative; display: block; margin: 0 auto; margin-top: 5px; margin-bottom: 10px; padding: 0px; width: 60px; height: 50px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; overflow: hidden; transition: 0.2s linear; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); background-color: var(--color-scheme-black--); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.Folder{ width: 80px; background-image: url('/assets/images/icons/folder-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.PDF{ margin-top: 5px; margin-bottom: 10px; width: 50px; height: 50px; background-image: url('/assets/images/icons/file_pdf_color.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.WORD{ background-image: url('/assets/images/icons/word-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.EXCEL{ background-image: url('/assets/images/icons/excel-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.POWERPOINT{ background-image: url('/assets/images/icons/ppt-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.ZIP{ background-image: url('/assets/images/icons/zip-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.CSV{ background-image: url('/assets/images/icons/csv-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.TXT{ background-image: url('/assets/images/icons/txt-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.XML{ background-image: url('/assets/images/icons/xml-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.AUDIO{ background-image: url('/assets/images/icons/audio-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.VIDEO{ background-image: url('/assets/images/icons/video-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .File.OTHER{ background-image: url('/assets/images/icons/other-document.svg'); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .Name{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; margin: 5px; padding: 0px; width: calc(100% - 10px); line-height: 20px; max-height: 40px; min-height: 20px; font-family: var(--primary-font--); font-size: 14px; text-align: center; color: var(--primary-text-color-dark-gray--); overflow: hidden; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .Size{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 10px); min-height: 14px; height: auto; font-family: var(--primary-font--); font-size: 12px; line-height: 14px; text-align: center; word-wrap: break-word; color: var(--color-gray--); overflow: hidden; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .StarIcon{ position: absolute; display: none; top: 2px; right: 20px; width: 20px; height: 20px; background-position: 1px 1px; background-repeat: no-repeat; background-size: 18px 18px; background-image: url('/assets/images/icons/star_full_yellow.svg'); border-radius: 5px; overflow: hidden; transition: 0.1s linear; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); background-color: rgba(0, 0, 0, 0.4); } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .StarIcon.Starred{ display: block; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FilesHolder .FileItem .ShareIcon{ position: absolute; display: block; top: 40px; right: 20px; width: 20px; height: 20px; background-position: 3px 3px; background-repeat: no-repeat; background-size: 14px 14px; background-image: url('/assets/images/icons/share_white.svg'); border-radius: 5px; overflow: hidden; transition: 0.1s linear; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.4)); background-color: rgba(0, 0, 0, 0.4); opacity: 1.0; } #ClouddriveView .InnerHolder .FoldersHolder .ItemMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 60px; left: -5px; width: 120px; min-height: 40px; height: auto; background-color: var(--color-white--); border-top: 1px var(--color-light-gray--) solid; border-bottom: 1px var(--color-light-gray--) solid; border-left: 1px var(--color-light-gray--) solid; border-right: 1px var(--color-light-gray--) solid; filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 0.4)); transform: translateZ(0); /* safari fix for drop shadow */ cursor: pointer; z-index: 1000; } #ClouddriveView .InnerHolder .FoldersHolder .ItemMenu .MenuItem{ position: relative; display: block; top: 0px; left: 0px; margin-top:0px; width: 100%; height: 40px; text-align: left; border-bottom: 1px var(--color-lighter-gray--) solid; } #ClouddriveView .InnerHolder .FoldersHolder .ItemMenu .MenuItem .Icon{ position: relative; display: inline-block; margin: 5px; top: 0px; left: 0px; width: 20px; height: 30px; vertical-align: middle; background-size:20px 20px; background-repeat: no-repeat; background-position: 0px 5px; } #ClouddriveView .InnerHolder .FoldersHolder .ItemMenu .MenuItem .Title{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: calc(100% - 40px); height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: start; unicode-bidi: plaintext; vertical-align: middle; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FileDropZone{ position: absolute; display: none; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255,255,255,0.7); overflow-x: hidden; pointer-events: none; } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer .FileDropZone .Icon{ position: relative; display: block; margin: 0 auto; padding: 20px; top: calc(50% - 60px); left: 0px; width: 50px; height: 50px; background-image:url('assets/images/icons/cloud_upload_black.svg'); background-size: 50px 50px; background-repeat: no-repeat; background-position: 20px 15px; background-color: var(--color-white--); border-radius: 25px; border: 1px var(--color-light-gray--) solid; overflow: hidden; } .ClouddriveViewPopUpContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; z-index: 600; } .ClouddriveViewPopUpContainerInnerHolder{ position: absolute; display: block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-white--); overflow: hidden; overflow-y: auto; transition: 0.2s; } #ClouddriveView .FilenameEditorContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } #ClouddriveView .FilePickerContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } #ClouddriveView .ShareSettingsPanelContainer{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; } #ClouddriveView .InnerHolder .FoldersHolder .MobileSidebarMenu{ position: absolute; display: none; margin: 0 auto; padding: 0px; top: 51px; left: 0px; width: 260px; height: calc(100% - 52px); background-color: var(--color-scheme-white--); box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2); overflow-x: hidden; overflow-y: auto; z-index: 1000; } #ClouddriveView .InnerHolder .FoldersHolder .MobileSidebarMenu.MobileSidebarMenu_rtl{ left: unset !important; right: 0px !important; } #ClouddriveView .InnerHolder .FoldersHolder .MobileSidebarFolderListHolder{ position: relative; display: inline-block; margin: 0 auto; margin-top: 20px; padding: 0px; top: 0px; left: 0px; width: 100%; height: auto; min-height: calc(100% - 336px); text-align: inherit; } #ClouddriveView .InnerHolder .UploadProgressHolder{ position: absolute; display: block; bottom: 0px; right: 0px; max-width: 400px; width: 100%; height: auto; min-height: 0px; overflow: hidden; } #ClouddriveView .InnerHolder .UploadProgressHolder .ProgressItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: left; direction: ltr; background-color: var(--color-scheme-blue-l2--); color: var(--primary-text-color-white--); text-overflow: ellipsis; white-space: nowrap; border-top: 1px var(--color-scheme-white--) solid; border-left: 1px var(--color-scheme-white--) solid; border-right: 1px var(--color-scheme-white--) solid; overflow: hidden; opacity: 0.7; } #ClouddriveView .InnerHolder .UploadProgressHolder .ProgressItem .UploadIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 30px; background-image: url('assets/images/icons/cloud_upload_white.svg'); background-repeat: no-repeat; background-position: 5px 5px; background-size: 20px 20px; overflow: hidden; } #ClouddriveView .InnerHolder .UploadProgressHolder .ProgressItem .Filename{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; vertical-align: top; width: calc(100% - 170px); height: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ClouddriveView .InnerHolder .UploadProgressHolder .ProgressItem .FileSize{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; vertical-align: top; width: 80px; height: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #ClouddriveView .InnerHolder .UploadProgressHolder .ProgressItem .Progress{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; vertical-align: top; text-align: center; width: 50px; height: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; } @container ClouddriveView (width < 1040px){ #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .InfoHolder{ display: none; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .Space1{ width: calc(100% - 410px); } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .Space2{ display: none; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchField { width: 160px; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchField input[type=text] { width: 160px; } } @media only screen and (max-width: 780px) { #ClouddriveView .InnerHolder .SidebarHolder{ display: none; } #ClouddriveView .InnerHolder .FoldersHolder{ width: 100%; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarTitleHolder{ max-width: 150px; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle{ padding-right: 30px; max-width: 120px; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle.NavigationBarTitle_rtl{ padding-right: 0px; padding-left: 30px; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle::after { content: "â–¼"; font-size: 10px; color: var(--primary-text-color-dark-gray--); position: absolute; right: 10px; top: 26px; transform: translateY(-50%); pointer-events: none; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarTitleHolder .NavigationBarTitle.NavigationBarTitle_rtl::after { left: 10px; right: unset } #ClouddriveView .InnerHolder .FoldersHolder .FilesContainer{ height: calc(100% - 52px); border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .NavigationBarTitle { width: 150px; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .Space1 { width: calc(100% - 350px); } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchField { width: 150px; } #ClouddriveView .InnerHolder .NavigationBarHolder .NavigationBar .SearchField input[type=text] { width: 150px; } } @media only screen and (min-width: 781px){ #ClouddriveView .InnerHolder .FoldersHolder .MobileSidebarMenu{ display: none !important; } } @media only screen and (hover: hover) and (min-width: 781px){ #ClouddriveView .Titlebar .TitleMenuButton .TitleBarMenu .TitleBarMenuItem:hover{ background-color: var(--color-lighter-gray--); } #ClouddriveView .InnerHolder .FoldersHolder .ItemMenu .MenuItem:hover{ background-color: var(--color-scheme-gray-l1--); } } /* filename: ../app/css/widgets/insights/KioskCustomerSurveyWidget.css */ .KioskCustomerSurveyWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; top: 0px; left: 0px; width: 340px; height: auto; max-height: 390px; vertical-align: top; border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; transition: opacity 0.3s linear; } .KioskCustomerSurveyWidget .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--dashboard-widget-titlebar-background-color--); } .KioskCustomerSurveyWidget .TitleHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .KioskCustomerSurveyWidget .TitleHolder .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 156px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--dashboard-widget-titlebar-itle-text-color--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .KioskCustomerSurveyWidget .TitleHolder .ItemsCount{ position: relative; display: inline-block; margin: 14px; padding: 0px; width: 34px; height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: center; color: var(--color-white--); border: 2px var(--color-white--) solid; border-radius: 5px; text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .KioskCustomerSurveyWidget .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .KioskCustomerSurveyWidget .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } .KioskCustomerSurveyWidget .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 332px; background-color: rgba(255, 255, 255, 0.6); transition: max-height 0.3s ease-out; opacity: 0.9; overflow-x: hidden; overflow-y: auto; } .KioskCustomerSurveyWidget .Table_Empty{ max-height: 70px; } .KioskCustomerSurveyWidget .Table .EmptyTableItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 10px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); } .KioskCustomerSurveyWidget .Table .TableItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 11px); height: 270px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; border-radius: 10px; } .KioskCustomerSurveyWidget .Table .TableItem .Name{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 30px; font-family: var(--primary-font--); font-size: 16px; font-weight: bold; line-height: 30px; text-align: inherit; color: var(--primary-text-color-brand-blue--); text-overflow: ellipsis; white-space: nowrap; } .KioskCustomerSurveyWidget .Table .TableItem .Description{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; } .KioskCustomerSurveyWidget .Table .TableItem .Info{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 20px); height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: inherit; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-gray-l2--); text-overflow: ellipsis; white-space: nowrap; } @container InsightsViewWidgetsContainer (max-width: 640px){ .KioskCustomerSurveyWidget{ margin-left: 0px; margin-right: 1px; max-height: 610px; } .KioskCustomerSurveyWidget .Table{ max-height: 560px; } } /* filename: ../app/css/widgets/dashboard/ShiftButtonWidget.css */ .ShiftButtonWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; top: 0px; left: 0px; width: 340px; height: 330px; text-align: center; vertical-align: top; background-color: rgba(255,255,255,0.9); border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; transition: opacity 0.3s linear; } #ShiftButtonWidgetToggleShiftHolder{ position:absolute; display: block; top: 254px; left: 0px; width: 100%; height: 50px; } #ShiftButtonWidgetToggleShiftHolder .ShiftToggleSwitch{ width: calc(100% - 180px); text-align: center; transition: 0.2 linear; } #ShiftButtonWidgetToggleShiftHolder .ShiftBreakButton{ position: relative; display: none; margin: 0 auto; margin-top: 4px; margin-bottom: 4px; margin-right: 5px; margin-left: 5px; padding: 0px; width: 150px; height: 40px; background-color: var(--primary-brand-color-blue--); vertical-align: middle; border-radius: 34px; border: 2px var(--color-scheme-white--) solid; filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.2)); transition: 0.2s linear; cursor: pointer; } #ShiftButtonWidgetToggleShiftHolder .BreakButtonActive{ background-color: var(--color-button-green--); border: 2px var(--color-scheme-white--) solid; } #ShiftButtonWidgetToggleShiftHolder .ShiftBreakButton .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 30px; height: 30px; background-position: 0px 0px; background-size: 30px 30px; vertical-align: middle; overflow: hidden; } #ShiftButtonWidgetToggleShiftHolder .ShiftBreakButton .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 50px); /*min-width: 60px;*/ /*max-width: calc(100% - 40px);*/ height: 40px; font-family: var(--primary-font--); font-size: 15px; line-height: 40px; text-align: center; color: var(--color-scheme-white--); text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } .align_right{ margin-left: 10px; } .align_left{ margin-right: 10px; } #ClockHolder{ position: relative; display: block; margin: 5px; margin-top: 16px; padding: 0px; top: 0px; left: 0px; height: 230px; width: calc(100% - 10px); } #ShiftButtonWidgetInfoHolder{ position: relative; display: block; margin: 5px; padding: 0px; top: 0px; left: 0px; height: 230px; width: calc(100% - 10px); /*background: var(--color-widget-blue--);*/ background-color: var(--primary-brand-color--); /*background: linear-gradient(194deg, rgba(124,163,246,1) 0%, rgba(31,93,203,1) 32%);*/ border-radius: 8px; transition: 0.1s linear; } .ShiftButtonWidgetInfoHolderOnABreak{ background-color: var(--color-button-green--) !important; } #ShiftButtonWidgetInfoHolderStartTime{ position: absolute; display: block; top: 140px; left: 0px; padding: 0px; margin: 0px; width: 100%; height: 30px; overflow: hidden; border-top: 1px var(--color-scheme-white--) solid; background-color: var(--primary-text-color-darkest-blue--); transform: translateZ(0); /* safari fix for drop shadow */ } #ShiftButtonWidgetInfoHolderStartTimeText{ position: absolute; display: block; top: 0px; left: 10px; width: calc(100% - 20px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: center; color: var(--color-scheme-white--); text-overflow: ellipsis; } #ShiftButtonWidgetInfoHolderLocation{ position: absolute; display: block; top: 170px; left: 0px; padding: 0px; margin: 0px; width: 100%; height: 50px; overflow: hidden; border-top: 1px var(--color-scheme-white--) solid; background-color: var(--primary-text-color-darkest-blue--); transform: translateZ(0); /* safari fix for drop shadow */ } #ShiftButtonWidgetInfoHolderLocationIcon{ position: absolute; display: block; top: 10px; left: 10px; width: 20px; height: 20px; background-image: url('/assets/images/icons/location_on_white.svg'); background-repeat: no-repeat; background-size: contain; } #ShiftButtonWidgetInfoHolderLocationText{ position: absolute; display: block; top: 10px; left: 35px; width: calc(100% - 70px); height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 18px; text-align: center; color: var(--color-scheme-white--); text-overflow: ellipsis; } #ShiftButtonWidgetInfoHolderElapsedTime{ position: absolute; display: block; top: 0px; left: 0px; padding: 0px; margin: 0px; width: 100%; height: 135px; overflow: hidden; transform: translateZ(0); /* safari fix for drop shadow */ } #ShiftButtonWidgetInfoHolderElapsedTimeTitleText{ position: absolute; display: block; top: 10px; left: 10px; width: calc(100% - 20px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--color-scheme-white--); text-overflow: ellipsis; } #ShiftButtonWidgetInfoHolderElapsedTimeText{ position: absolute; display: block; top: 42px; left: 10px; width: calc(100% - 20px); height: 50px; font-family: var(--primary-font--); font-size: 40px; line-height: 50px; text-align: center; color: var(--color-scheme-white--); text-overflow: ellipsis; } #ShiftButtonWidgetInfoHolderElapsedTimePositionText{ position: absolute; display: block; top: 100px; left: 20px; width: calc(100% - 40px); height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 30px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; border: 1px var(--color-scheme-white--) solid; border-radius: 15px; background-color: var(--color-light-blue--); } @container DashboardViewWidgetsContainer (max-width: 640px){ .ShiftButtonWidget{ margin-left: 0px; margin-right: 1px; } } @media only screen and (hover: hover) and (min-width: 781px){ #ShiftButtonWidgetToggleShiftHolder .ShiftBreakButton:hover{ background-color: var(--primary-brand-color-dark-blue--); } #ShiftButtonWidgetToggleShiftHolder .BreakButtonActive:hover { background-color: var(--color-button-dark-green--) !important; } } /* filename: ../app/css/widgets/dashboard/CalculatorWidget.css */ .CalculatorWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; padding-bottom: 4px; top: 0px; left: 0px; width: 340px; height: auto; vertical-align: top; overflow: hidden; transition: opacity 0.3s linear; } .CalculatorWidget .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--dashboard-widget-titlebar-background-color--); filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; border-radius: 10px; } .CalculatorWidget .TitleHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .CalculatorWidget .TitleHolder .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 150px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--dashboard-widget-titlebar-itle-text-color--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .CalculatorWidget .TitleHolder .ItemsCount{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 60px; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: #ffffff; text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .CalculatorWidget .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .CalculatorWidget .TitleHolder .TitlePopupButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 58px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/popup_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .CalculatorWidget .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } .CalculatorWidget .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: calc(100% - 2px); height: auto; min-height: 50px; overflow-x: hidden; overflow-y: auto; } .Calculator { position: relative; display: block; margin: 0 auto; margin-top: 20px; margin-bottom: 20px; padding: 10px 5px 5px 5px; font-family: Arial, Helvetica, sans-serif; background-color: #1C1C1C; width: 270px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ border-radius: 10px; direction: ltr; } .Display { position: relative; display: block; margin: 0 auto; padding: 5px; width: calc(100% - 10px); height: 120px; text-align: right; font-size: 50px; font-size: clamp(1rem, -0.875rem + 8.333vw, 3.5rem); line-height: 120px; color: white; box-sizing: border-box; background-color: #444444; border-radius: 5px; border: none; outline: none; overflow: hidden; } .Buttons { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; margin: 0px 0px 0px 2px; gap: 10px; width: calc(100% - 10px); } .Buttons button { background-color: #505050; color: white; font-size: 22px; text-align: center; width: 50px; height: 50px; border-radius: 15px; border: none; cursor: pointer; } @container DashboardViewWidgetsContainer (max-width: 640px){ .CalculatorWidget{ margin-left: 0px; margin-right: 1px; } .CalculatorWidget .Table{ max-height: unset; } } @media only screen and (max-width: 780px){ .CalculatorWidget .TitleHolder .TitlePopupButton{ opacity: 0.0; pointer-events: none; } } @media only screen and (hover: hover) and (min-width: 781px){ .Buttons button:hover { opacity: 70%; } .Buttons button:active { opacity: 90%; } } /* filename: ../app/css/widgets/dashboard/BookmarkedFormsWidget.css */ .BookmarkedFormsWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; top: 0px; left: 0px; width: 340px; height: auto; max-height: 330px; vertical-align: top; border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; transition: opacity 0.3s linear; } .BookmarkedFormsWidget .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--dashboard-widget-titlebar-background-color--); } .BookmarkedFormsWidget .TitleHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .BookmarkedFormsWidget .TitleHolder .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 156px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--dashboard-widget-titlebar-itle-text-color--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .BookmarkedFormsWidget .TitleHolder .ItemsCount{ position: relative; display: inline-block; margin: 14px; padding: 0px; width: 34px; height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: center; color: var(--color-white--); border: 2px var(--color-white--) solid; border-radius: 5px; text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .BookmarkedFormsWidget .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .BookmarkedFormsWidget .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } .BookmarkedFormsWidget .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 280px; /*background-color: var(--color-lighter-gray--);*/ background-color: var(--color-white--); transition: max-height 0.3s ease-out; opacity: 0.9; overflow-x: hidden; overflow-y: auto; } .BookmarkedFormsWidget .Table_Empty{ max-height: 70px; } .BookmarkedFormsWidget .Table .TemplateItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 11px); min-height: 50px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; cursor: pointer; } .BookmarkedFormsWidget .Table .TemplateItem:hover{ background-color: var(--color-superlight-gray--) !important; } .BookmarkedFormsWidget .Table .EmptyTemplateItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 10px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); } .BookmarkedFormsWidget .Table .TemplateItem .Name{ position: relative; display: inline-block; margin: 0 auto; margin-top: 15px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 70px); min-height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); vertical-align: top; } .BookmarkedFormsWidget .Table .TemplateItem .rtl{ text-align: right !important; } .BookmarkedFormsWidget .Table .TemplateItem .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-image:url('/assets/images/icons/form_template_black.svg'); background-position: 5px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .BookmarkedFormsWidget .Table .TemplateItem .InfoHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 50px; line-height: 0px; background-color: var(--color-superlight-gray--); box-shadow: 1px 1px 1px rgb(0 0 0 / 0.2); } .BookmarkedFormsWidget .Table .TemplateItem:hover .InfoHolder{ background-color: var(--color-superlight-gray--) !important; } .BookmarkedFormsWidget .Table .TemplateItem .InfoHolder .InfoItem{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 50%; height: 60px; overflow: hidden; } .BookmarkedFormsWidget .Table .TemplateItem .InfoHolder .InfoItem .Title{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; margin-top: 2px; padding: 0px; width: calc(100% - 20px); height: 25px; font-family: var(--primary-font--); font-size: 14px; line-height: 25px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); overflow: hidden; } .BookmarkedFormsWidget .Table .TemplateItem .InfoHolder .InfoItem .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 20px; width: 20px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: 20px 20px; border-radius: 16px; border: 2px #ffffff solid; } .BookmarkedFormsWidget .Table .TemplateItem .InfoHolder .InfoItem .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .BookmarkedFormsWidget .Table .TemplateItem .InfoHolder .InfoItem .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 20px; width: 20px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: 20px 20px; } .BookmarkedFormsWidget .Table .TemplateItem .InfoHolder .InfoItem .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @container DashboardViewWidgetsContainer (max-width: 640px){ .BookmarkedFormsWidget{ margin-left: 0px; margin-right: 1px; max-height: 405px; } .BookmarkedFormsWidget .Table{ max-height: unset; } } /* filename: ../app/css/widgets/dashboard/CalendarWidget.css */ .CalendarWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; top: 0px; left: 0px; width: 340px; height: auto; max-height: 330px; vertical-align: top; text-align: left; border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; transition: opacity 0.3s linear; } .CalendarWidget .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--dashboard-widget-titlebar-background-color--); } .CalendarWidget .TitleHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .CalendarWidget .TitleHolder .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 156px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--dashboard-widget-titlebar-itle-text-color--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .CalendarWidget .TitleHolder .ItemsCount{ position: relative; display: inline-block; margin: 14px; padding: 0px; width: 34px; height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: center; color: var(--color-white--); border: 2px var(--color-white--) solid; border-radius: 5px; text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .CalendarWidget .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .CalendarWidget .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } .CalendarWidget .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 280px; background-color: var(--color-white--); transition: max-height 0.3s ease-out; opacity: 0.9; overflow-x: hidden; overflow-y: auto; } .CalendarWidget .Table .CalendarEvent{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; min-height: 50px; overflow: hidden; border-bottom: 1px var(--color-scheme-gray-l2--) solid; transition: 0.2s linear; cursor: pointer; } .CalendarWidget .Table .CalendarEvent .Title{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-top: 10px; padding-left:15px; padding-right:15px; padding-bottom: 10px; width: calc(100% - 30px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); overflow: hidden; } .CalendarWidget .Table .CalendarEvent .Time{ position: relative; display: block; margin: 0 auto; padding-top: 5px; padding-bottom: 2px; padding-left:10px; padding-right:10px; width: calc(100% - 20px); min-height: 20px; height: auto; font-family: var(--primary-font--); font-size: 12px; font-weight: bold; line-height: 20px; text-align: inherit; color: var(--primary-text-color-dark-gray--); background-color: var(--color-scheme-blue-l6--); overflow: hidden; } .CalendarWidget .Table .CalendarEvent .Time .CalendarIcon { position: relative; display: inline-block; margin: 0px auto; padding: 0px; width: 28px; height: 25px; background-image: url(/assets/images/icons/calendar_color.svg); background-position: 2px -2px; background-size: 25px 25px; background-repeat: no-repeat; vertical-align: middle; overflow: hidden; } .CalendarWidget .Table_Empty{ max-height: 70px; } .CalendarWidget .Table .EmptyItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 10px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); } @media only screen and (hover: hover) and (min-width: 781px){ .CalendarWidget .Table .CalendarEvent:hover{ background-color: var(--color-scheme-gray-l1--); } } @container DashboardViewWidgetsContainer (max-width: 640px){ } /* filename: ../app/css/widgets/dashboard/PhoneWidget.css */ .PhoneWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; top: 0px; left: 0px; width: 340px; height: auto; max-height: 330px; vertical-align: top; border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; transition: opacity 0.3s linear; } .PhoneWidget .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--dashboard-widget-titlebar-background-color--); } .PhoneWidget .TitleHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .PhoneWidget .TitleHolder .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 260px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--dashboard-widget-titlebar-itle-text-color--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .PhoneWidget .TitleHolder .SearchBar{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 170px; height: 50px; text-align: center; vertical-align: top; overflow: hidden; border-top-left-radius: 8px; border-top-right-radius: 8px; } .PhoneWidget .TitleHolder .SearchBar .SearchField{ position: relative; display: inline-block; margin: 0px; margin-left: 10px; margin-right: 20px; padding: 0px; top: 0px; left: 0px; width: 160px; height: 46px; vertical-align: middle; overflow: hidden; } .PhoneWidget .TitleHolder .SearchBar .SearchField .SearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 10px; left: 15px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } .PhoneWidget .TitleHolder .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 12px; right: 4px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--primary-brand-color-light-blue--); cursor: pointer; } .PhoneWidget .TitleHolder .SearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--primary-brand-color-blue--); } .PhoneWidget .TitleHolder .SearchBar .SearchField input[type=text]{ position: absolute; display: block; margin-left: 10px; margin-right: 10px; padding-left: 35px; padding-right: 38px; top: 8px; left: 0px; width: calc(100% - 10px); height: 34px; box-sizing: border-box; font-size: 16px; line-height: 36px; text-align: start; unicode-bidi: plaintext; border: none; background-color: var(--color-white--); color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 18px; } .PhoneWidget .TitleHolder .SearchBar .SearchField input[type=text]:focus{ outline: none; } .PhoneWidget .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .PhoneWidget .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } .PhoneWidget .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 220px; background-color: var(--color-scheme-white--); transition: max-height 0.3s ease-out; opacity: 0.9; overflow-x: hidden; overflow-y: auto; } .PhoneWidget .Table .NoResultsItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; font-family: var(--primary-font--); font-size: 16px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; border-bottom: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; } .PhoneWidget .Table .ContactItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; border-bottom: 1px var(--color-scheme-gray-l2--) solid; text-align: left; overflow: hidden; transition: 0.2s linear; } .PhoneWidget .Table .ContactItem .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; left: 0px; height: 36px; width: 36px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 25px; border: 2px var(--color-scheme-white--) solid; } .PhoneWidget .Table .ContactItem .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 190px); height: 50px; vertical-align: middle; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .PhoneWidget .Table .ContactItem .ChatButton{ position: relative; display: inline-block; margin: 0px; margin-left: 2px; margin-right: 2px; padding: 0px; top: 0px; left: 0px; height: 34px; width: 34px; vertical-align: middle; background-image: url('/assets/images/icons/chat_white.svg'); background-color: var(--color-button-green--); background-position: 6px 7px; background-size: 22px 22px; background-repeat: no-repeat; border-radius: 25px; border: 2px var(--color-scheme-white--) solid; transition: 0.2s linear; cursor: pointer; } .PhoneWidget .Table .ContactItem .VideoCallButton{ position: relative; display: inline-block; margin: 0px; margin-left: 2px; margin-right: 2px; padding: 0px; top: 0px; left: 0px; height: 34px; width: 34px; vertical-align: middle; background-image: url('/assets/images/icons/video_call_white.svg'); background-color: var(--color-button-green--); background-position: 6px 5px; background-size: 24px 24px; background-repeat: no-repeat; border-radius: 25px; border: 2px var(--color-scheme-white--) solid; transition: 0.2s linear; cursor: pointer; } .PhoneWidget .Table .ContactItem .VoiceCallButton{ position: relative; display: inline-block; margin: 0px; margin-left: 2px; margin-right: 2px; padding: 0px; top: 0px; left: 0px; height: 34px; width: 34px; vertical-align: middle; background-image: url('/assets/images/icons/call_white.svg'); background-color: var(--color-button-green--); background-position: 5px 5px; background-size: 24px 24px; background-repeat: no-repeat; border-radius: 25px; border: 2px var(--color-scheme-white--) solid; transition: 0.2s linear; cursor: pointer; } .PhoneWidget .Table .CallLogItem{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; border-bottom: 1px var(--color-scheme-gray-l2--) solid; overflow: hidden; transition: 0.2s linear; } .PhoneWidget .Table .CallLogItem:last-child{ border-bottom:unset; } .PhoneWidget .Table .CallLogItem .Icon{ position: relative; display: inline-block; margin: 5px; padding: 0px; width: 40px; height: 40px; vertical-align: middle; background-size: 24px 24px; background-repeat: no-repeat; background-position: 8px 8px; border-radius: 25px; overflow: hidden; cursor: pointer; } .PhoneWidget .Table .CallLogItem .Icon.Disabled{ cursor: default; opacity: 0.2; } .PhoneWidget .Table .CallLogItem .ProfilePicture{ position: relative; display: inline-block; margin: 0px; margin-left: 10px; margin-right: 10px; padding: 0px; top: 0px; left: 0px; height: 36px; width: 36px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: contain; border-radius: 25px; border: 2px var(--color-scheme-white--) solid; cursor: pointer; } .PhoneWidget .Table .CallLogItem .InfoHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 170px); height: 50px; text-align: left; vertical-align: middle; overflow: hidden; } .PhoneWidget .Table .CallLogItem .InfoHolder .Name{ position: relative; display: block; margin: 0 auto; margin-top: 5px; padding: 0px; width: 100%; height: 20px; font-family: var(--primary-font--); font-size: 15px; line-height: 20px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .PhoneWidget .Table .CallLogItem .InfoHolder .InfoIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 20px; height: 20px; vertical-align: middle; background-size: 14px 14px; background-repeat: no-repeat; background-position: 3px 3px; } .PhoneWidget .Table .CallLogItem .InfoHolder .Info{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 20px); height: 20px; font-family: var(--primary-font--); font-size: 12px; line-height: 20px; text-align: inherit; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } .PhoneWidget .Table .CallLogItem .CallTime{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 60px; height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: left; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; vertical-align: middle; overflow: hidden; } .PhoneWidget .ButtonsHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 60px; background-color: var(--color-scheme-white--); border-top: 1px var(--color-light-gray--) solid; overflow: hidden; } .PhoneWidget .ButtonsHolder .Button{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(50% - 1px); height: 60px; vertical-align: middle; border-left: 1px var(--color-scheme-gray-l2--) solid; cursor: pointer; } .PhoneWidget .ButtonsHolder .Button_rtl{ border-left: unset; border-right: 1px var(--color-scheme-gray-l2--) solid; } .PhoneWidget .ButtonsHolder .Button_rtl:first-child{ width: 50%; border-right: unset; } .PhoneWidget .ButtonsHolder .Button:first-child{ width: 50%; border-left: unset; } .PhoneWidget .ButtonsHolder .Button:active{ background-color: var(--color-scheme-gray-l2--); } .PhoneWidget .ButtonsHolder .Button .ButtonIcon{ position: relative; display: block; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; padding: 0px; width: 24px; height: 24px; background-size: cover; background-repeat: no-repeat; background-position: 0px 0px; } .PhoneWidget .ButtonsHolder .Button .ButtonTitle{ position: relative; display: block; margin: 0 auto; width: calc(100% - 50px); height: 20px; font-family: var(--primary-font--); font-size: 14px; line-height: 20px; text-align: center; color: var(--primary-text-color-dark-gray--); text-overflow: ellipsis; } @media only screen and (hover: hover) and (min-width: 781px){ .PhoneWidget .Table .CallLogItem:hover{ background-color: var(--color-scheme-gray-l1--); } .PhoneWidget .Table .CallLogItem:hover .Icon{ background-color: var(--color-scheme-gray-l0--); } .PhoneWidget .Table .ContactItem .ChatButton:hover{ background-color: var(--color-button-dark-green--); } .PhoneWidget .Table .ContactItem .VideoCallButton:hover{ background-color: var(--color-button-dark-green--); } .PhoneWidget .Table .ContactItem .VoiceCallButton:hover{ background-color: var(--color-button-dark-green--); } } @container DashboardViewWidgetsContainer (max-width: 640px){ .PhoneWidget{ margin-left: 0px; margin-right: 1px; max-height: 405px; } .PhoneWidget .Table{ max-height: unset; } } /* filename: ../app/css/widgets/dashboard/WeatherWidget.css */ .WeatherWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; top: 0px; left: 0px; width: 340px; height: auto; vertical-align: top; border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; transition: opacity 0.3s linear; } .WeatherWidget .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--dashboard-widget-titlebar-background-color--); } .WeatherWidget .TitleHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; color: var(--color-scheme-white--); vertical-align: top; overflow: hidden; } .WeatherWidget .TitleHolder .Icon svg{ margin: 0 auto; padding: 6px; width: 40px; height: 40px; fill: currentColor; } .WeatherWidget .TitleHolder .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 172px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--dashboard-widget-titlebar-itle-text-color--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .WeatherWidget .TitleHolder .ItemsCount{ position: relative; display: inline-block; margin: 16px; padding: 0px; width: 50px; height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: center; color: var(--color-white--); /*border: 2px var(--color-white--) solid;*/ border-radius: 5px; text-overflow: ellipsis; direction: ltr; vertical-align: top; overflow: hidden; } .WeatherWidget .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .WeatherWidget .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } .WeatherWidget .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 280px; background-color: rgba(255,255,255,0.8); transition: max-height 0.3s ease-out; text-align: left; opacity: 0.85; overflow-x: hidden; overflow-y: auto; } .Theme_Daytime{ background: rgba(0,71,171,1); background: linear-gradient(to right,#2980B9,#6DD5FA,#FFFFFF); color: var(--primary-text-color-black--); } .Theme_Nighttime{ background: rgb(0,71,171); background: linear-gradient(159deg, rgba(0,71,171,1) 0%, rgba(28,169,201,1) 100%); color: var(--primary-text-color-white--); } .Theme_Sunrise{ background: #3b0000; background: linear-gradient(76deg, rgba(59, 0, 0, 0.8) 0%, rgba(253, 29, 29, 0.8) 50%, rgba(252, 176, 69, 0.8) 100%); color: var(--primary-text-color-white--); } .Theme_Sunset{ background: #3b0000; background: linear-gradient(267deg,rgba(59, 0, 0, 0.8) 0%, rgba(253, 29, 29, 0.8) 50%, rgba(252, 176, 69, 0.8) 100%); color: var(--primary-text-color-white--); } .TableOverlay{ position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url('/assets/images/weather/raindrops.png'); background-size: 100px 100px; background-repeat: repeat; opacity: 0.4; } .WeatherWidget .Table .Today{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 75px; overflow: hidden; } .WeatherWidget .Table .Today .WeatherIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 80px; height: 80px; background-position: 0px 0px; background-size: contain; background-repeat: no-repeat; vertical-align: top; color: inherit; overflow: hidden; } .WeatherWidget .Table .Today .WeatherIcon svg{ margin: 0 auto; margin-top: 4px; padding: 5px; width: 70px; height: 60px; fill: currentColor; } .WeatherWidget .Table .Today .InfoHolder{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 80px); height: 100%; vertical-align: top; overflow: hidden; } .WeatherWidget .Table .Today .InfoHolder .Address{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: inherit; color: inherit; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .WeatherWidget .Table .Today .InfoHolder .Temperature{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 65px; height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 15px; text-align: inherit; direction: ltr; color: inherit; text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .WeatherWidget .Table .Today .InfoHolder .Windspeed{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 85px); height: 20px; font-family: var(--primary-font--); font-size: 12px; line-height: 15px; text-align: right; direction: inherit; color: inherit; text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .WeatherWidget .Table .Today .InfoHolder .Windspeed_rtl{ text-align: left; } .WeatherWidget .Table .Today .InfoHolder .Description{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 25px; font-family: var(--primary-font--); font-size: 18px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: inherit; text-overflow: ellipsis; overflow: hidden; } .WeatherWidget .Table .Day{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; direction: inherit; text-align: inherit; border-top: 1px rgba(255,255,255,0.5) solid; } .WeatherWidget .Table .Day .Title{ position: relative; display: inline-block; margin: 0 auto; margin-left: 10px; margin-right: 10px; padding: 0px; width: 34px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: inherit; text-overflow: ellipsis; vertical-align: top; } .WeatherWidget .Table .Day .WeatherIcon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 40px; vertical-align: top; color: inherit; overflow: hidden; } .WeatherWidget .Table .Day .WeatherIcon svg{ width: 100%; height: 100%; fill: currentColor; } .WeatherWidget .Table .Day .Temperature{ position: relative; display: inline-block; margin: 0 auto; margin-left: 10px; margin-right: 10px; padding: 0px; width: 100px; height: 40px; font-family: var(--primary-font--); font-size: 16px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: inherit; text-overflow: ellipsis; text-align: right; vertical-align: top; } .WeatherWidget .Table .Day .Description{ position: relative; display: inline-block; margin: 0 auto; margin-left: 10px; margin-right: 10px; padding: 0px; width: calc(100% - 234px); height: 40px; font-family: var(--primary-font--); font-size: 14px; line-height: 40px; text-align: start; unicode-bidi: plaintext; color: inherit; text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .WeatherWidget .Table_Empty{ max-height: 70px; } .WeatherWidget .Table .EmptyNewsItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 10px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: center; color: var(--primary-text-color-black--); } @container DashboardViewWidgetsContainer (max-width: 640px){ .WeatherWidget{ margin-left: 0px; margin-right: 1px; } .WeatherWidget .Table{ max-height: unset; } } /* filename: ../app/css/widgets/dashboard/ClockWidget.css */ .ClockWidget{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 220px; height: 220px; text-align: center; background-color: rgba(255,255,255,0.8); border-radius: 30px; border: 1px var(--color-scheme-gray-l2--) solid; /*box-shadow: 1px 1px 3px rgb(0 0 0 / 0.2);*/ } .ClockWidgetCanvas{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 220px; height: 220px; image-rendering: auto; } /* filename: ../app/css/widgets/dashboard/EmailWidget.css */ .EmailWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; top: 0px; left: 0px; width: 340px; max-height: 330px; vertical-align: top; border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; transition: opacity 0.3s linear; } .EmailWidget .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--dashboard-widget-titlebar-background-color--); } .EmailWidget .TitleHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .EmailWidget .TitleHolder .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 260px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--dashboard-widget-titlebar-itle-text-color--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .EmailWidget .TitleHolder .SearchBar{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 170px; height: 50px; text-align: center; vertical-align: top; overflow: hidden; border-top-left-radius: 8px; border-top-right-radius: 8px; } .EmailWidget .TitleHolder .SearchBar .SearchField{ position: relative; display: inline-block; margin: 0px; margin-left: 10px; margin-right: 20px; padding: 0px; top: 0px; left: 0px; width: 160px; height: 46px; vertical-align: middle; overflow: hidden; } .EmailWidget .TitleHolder .SearchBar .SearchField .SearchIcon{ position: absolute; display: block; padding: 5px; margin: 0px; top: 10px; left: 15px; width: 22px; height: 22px; border-radius: 22px; background-image:url('assets/images/icons/search.svg'); background-size: 22px 22px; background-repeat: no-repeat; background-position: 5px 5px; } .EmailWidget .TitleHolder .SearchField .SearchBarClearButton{ position: absolute; display: none; padding: 5px; margin: 0px; top: 12px; right: 4px; width: 16px; height: 16px; border-radius: 14px; background-image: url(assets/images/icons/close_white.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: 5px 5px; background-color: var(--primary-brand-color-light-blue--); cursor: pointer; } .EmailWidget .TitleHolder .SearchBar .SearchField .SearchBarClearButton:active{ background-color: var(--primary-brand-color-blue--); } .EmailWidget .TitleHolder .SearchBar .SearchField input[type=text]{ position: absolute; display: block; margin-left: 10px; margin-right: 10px; padding-left: 35px; padding-right: 38px; top: 8px; left: 0px; width: calc(100% - 10px); height: 34px; box-sizing: border-box; font-size: 16px; line-height: 36px; text-align: start; unicode-bidi: plaintext; border: none; background-color: var(--color-white--); color: var(--primary-text-color-dark-gray--); border-bottom: 1px solid #e0e0e0; border-radius: 18px; } .EmailWidget .TitleHolder .SearchBar .SearchField input[type=text]:focus{ outline: none; } .EmailWidget .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .EmailWidget .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } .EmailWidget .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 280px; background-color: var(--color-white--); transition: max-height 0.3s ease-out; opacity: 0.9; overflow-x: hidden; overflow-y: auto; } .EmailWidget .Table .EmptyEmailItem{ position: absolute; display: block; margin: 0 auto; margin: 5px; top: calc(50% - 38px); width: calc(100% - 10px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); } .EmailWidget .Table .EmailItem{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; padding: 0px; width: 100%; height: 80px; text-align: left; direction: ltr; border-bottom: 1px var(--color-light-gray--) solid; transition: 0.2s linear; cursor: pointer; } .EmailWidget .Table .EmailItem.EmailItem_rtl{ direction: rtl; text-align: right; } .EmailWidget .Table .EmailItem .Line1{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 35px; } .EmailWidget .Table .EmailItem .Line2{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 20px; } .EmailWidget .Table .EmailItem .Line3{ display: flex; justify-content: space-between; align-items: center; height: 20px; width: 100%; } .EmailWidget .Table .EmailItem .Logo{ position: relative; display: inline-block; margin: 5px; margin-top: 25px; margin-left: 9px; margin-right: 9px; padding: 0px; width: 30px; height: 30px; vertical-align: top; border-radius: 20px; overflow: hidden; } .EmailWidget .Table .EmailItem .Envelop{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 20px; height: 40px; background-image: url('/assets/images/icons/email_unread_black.svg'); background-position: 0px 10px; background-size: 20px 20px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; } .EmailWidget .Table .EmailItem .Envelop.Read{ background-image: url('/assets/images/icons/email_read_black.svg') !important; } .EmailWidget .Table .EmailItem .Sender{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; padding-left: 5px; padding-right: 5px; width: calc(100% - 110px); height: 40px; font-family: var(--primary-font--); font-size: 16px; color: var(--color-dark-gray--); line-height: 40px; text-align: start; unicode-bidi: plaintext; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; overflow: hidden; } .EmailWidget .Table .EmailItem .Sender.Read{ font-weight: normal; } .EmailWidget .Table .EmailItem .Sender_rtl{ text-align: right; } .EmailWidget .Table .EmailItem .Attachment{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 20px; height: 40px; background-image: url('/assets/images/icons/attachment_black.svg'); background-position: 1px 12px; background-size: 18px 18px; background-repeat: no-repeat; vertical-align: top; overflow: hidden; opacity: 0.0; } .EmailWidget .Table .EmailItem .Attachment.Visible{ opacity: 1.0; } .EmailWidget .Table .EmailItem .MenuButton{ position: relative; display: inline-block; margin: 0px; padding: 0px; top: 0px; left: 0px; height: 40px; width: 40px; vertical-align: middle; background-position: 10px 0px; background-image: url(/assets/images/icons/menu_dots_black.svg); background-repeat: no-repeat; background-size: 20px 40px; cursor: pointer; } .EmailWidget .Table .EmailItem .Subject{ position: relative; display: block; margin: 0 auto; padding: 0px; padding-left: 50px; padding-right: 10px; width: calc(100% - 60px); height: 20px; font-family: var(--primary-font--); font-size: 15px; color: var(--color-dark-gray--); line-height: 18px; text-align: inherit; unicode-bidi: plaintext; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .EmailWidget .Table .EmailItem .Subject.Subject_rtl{ padding-left: 10px; padding-right: 50px; } .EmailWidget .Table .EmailItem .FirstLine { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 10px 0 50px; height: 20px; box-sizing: border-box; font-family: var(--primary-font--); font-size: 15px; color: var(--color-gray--); line-height: 20px; text-align: inherit; unicode-bidi: plaintext; vertical-align: top; } .EmailWidget .Table .EmailItem .FirstLine.FirstLine_rtl{ padding-left: 10px; padding-right: 50px; } .EmailWidget .Table .EmailItem .ReceivedAt { position: relative; display: inline-block; margin: 0; padding: 0 10px; width: auto; height: 20px; font-family: var(--primary-font--); font-size: 14px; color: var(--color-dark-gray--); line-height: 20px; text-overflow: ellipsis; white-space: nowrap; text-align: right; vertical-align: top; overflow: hidden; flex-shrink: 0; } .EmailWidget .Table .EmailItem .ReceivedAt.ReceivedAt_rtl{ text-align: left; } .EmailWidget .Table .TableFooter{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 40px; font-family: var(--primary-font--); font-size: 14px; text-align: center; color: var(--color-dark-gray--); line-height: 40px; background-color: var(--color-scheme-gray-l1--); overflow: hidden; transition: 0.2s linear; cursor: pointer; } @media only screen and (hover: hover) and (min-width: 781px){ .EmailWidget .Table .EmailItem:hover{ background-color: var(--color-scheme-gray-l1--); } .EmailWidget .Table .TableFooter:hover{ background-color: var(--color-scheme-gray-l2--); } } @container DashboardViewWidgetsContainer (max-width: 640px){ .EmailWidget{ margin-left: 0px; margin-right: 1px; } .EmailWidget .Table{ max-height: unset; } } /* filename: ../app/css/widgets/dashboard/OpenFormsWidget.css */ .OpenFormsWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; top: 0px; left: 0px; width: 340px; height: auto; max-height: 330px; vertical-align: top; border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; transition: opacity 0.3s linear; } .OpenFormsWidget .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--dashboard-widget-titlebar-background-color--); } .OpenFormsWidget .TitleHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .OpenFormsWidget .TitleHolder .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 156px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--dashboard-widget-titlebar-itle-text-color--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .OpenFormsWidget .TitleHolder .ItemsCount{ position: relative; display: inline-block; margin: 14px; padding: 0px; width: 34px; height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: center; color: var(--color-white--); border: 2px var(--color-white--) solid; border-radius: 5px; text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .OpenFormsWidget .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .OpenFormsWidget .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } .OpenFormsWidget .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 280px; /*background-color: var(--color-lighter-gray--);*/ background-color: var(--color-white--); transition: max-height 0.3s ease-out; opacity: 0.9; overflow-x: hidden; overflow-y: auto; } .OpenFormsWidget .Table_Empty{ max-height: 70px; } .OpenFormsWidget .Table .FormItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 11px); min-height: 50px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; cursor: pointer; } .OpenFormsWidget .Table .FormItem:hover{ background-color: var(--color-superlight-gray--) !important; } .OpenFormsWidget .Table .EmptyFormItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 10px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); } .OpenFormsWidget .Table .FormItem .Name{ position: relative; display: inline-block; margin: 0 auto; margin-top: 15px; padding: 0px; padding-left: 10px; padding-right: 10px; width: calc(100% - 70px); min-height: 30px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); vertical-align: top; } .OpenFormsWidget .Table .FormItem .rtl{ text-align: right !important; } .OpenFormsWidget .Table .FormItem .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-image:url('/assets/images/icons/form_file_black.svg'); background-position: 5px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .OpenFormsWidget .Table .FormItem .InfoHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; min-height: 50px; line-height: 0px; background-color: var(--color-superlight-gray--); box-shadow: 1px 1px 1px rgb(0 0 0 / 0.2); } .OpenFormsWidget .Table .FormItem:hover .InfoHolder{ background-color: var(--color-superlight-gray--) !important; } .OpenFormsWidget .Table .FormItem .InfoHolder .InfoItem{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; top: 0px; left: 0px; width: 50%; height: 60px; overflow: hidden; } .OpenFormsWidget .Table .FormItem .InfoHolder .InfoItem .Title{ position: relative; display: block; top: 0px; left: 0px; margin: 0 auto; margin-top: 2px; padding: 0px; width: calc(100% - 20px); height: 25px; font-family: var(--primary-font--); font-size: 14px; line-height: 25px; text-align: start; unicode-bidi: plaintext; color: var(--primary-text-color-dark-gray--); overflow: hidden; } .OpenFormsWidget .Table .FormItem .InfoHolder .InfoItem .ProfilePicture{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 20px; width: 20px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: 20px 20px; border-radius: 16px; border: 2px #ffffff solid; } .OpenFormsWidget .Table .FormItem .InfoHolder .InfoItem .Name{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-right: 5px; margin-left: 5px; width: calc(100% - 60px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .OpenFormsWidget .Table .FormItem .InfoHolder .InfoItem .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-top: 1px; margin-left: 5px; margin-right: 5px; padding: 0px; top: 0px; height: 20px; width: 20px; vertical-align: middle; background-position: 0px 0px; background-repeat: no-repeat; background-size: 20px 20px; } .OpenFormsWidget .Table .FormItem .InfoHolder .InfoItem .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; margin-right: 5px; margin-left: 5px; width: calc(100% - 56px); height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: start; vertical-align: middle; color: var(--color-dark-gray--); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } @container DashboardViewWidgetsContainer (max-width: 640px){ .OpenFormsWidget{ margin-left: 0px; margin-right: 1px; } } /* filename: ../app/css/widgets/dashboard/NewsWidget.css */ .NewsWidget{ position: relative; display: inline-block; margin: 5px; padding: 0px; top: 0px; left: 0px; width: 340px; height: auto; vertical-align: top; border-radius: 10px; filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2)); /*border: 1px var(--color-light-gray--) solid;*/ overflow: hidden; transition: opacity 0.3s linear; } .NewsWidget .TitleHolder{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: 50px; background-color: var(--dashboard-widget-titlebar-background-color--); } .NewsWidget .TitleHolder .Icon{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 50px; height: 50px; background-position: 10px 10px; background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; overflow: hidden; } .NewsWidget .TitleHolder .Text{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: calc(100% - 156px); height: 50px; font-family: var(--primary-font--); font-size: 18px; line-height: 50px; text-align: start; unicode-bidi: plaintext; color: var(--dashboard-widget-titlebar-itle-text-color--); text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .NewsWidget .TitleHolder .ItemsCount{ position: relative; display: inline-block; margin: 14px; padding: 0px; width: 34px; height: 20px; font-family: var(--primary-font--); font-size: 16px; line-height: 20px; text-align: center; color: var(--color-white--); border: 2px var(--color-white--) solid; border-radius: 5px; text-overflow: ellipsis; vertical-align: top; overflow: hidden; } .NewsWidget .TitleHolder .TitleButton{ position: relative; display: inline-block; margin: 0 auto; padding: 0px; width: 40px; height: 50px; background-position: 5px 10px; background-image: url(/assets/images/icons/arrow_down_white.svg); background-repeat: no-repeat; background-size: 30px 30px; vertical-align: top; cursor: pointer; transition: 0.2s; } .NewsWidget .TitleHolder .TitleButton_collapse{ transform: rotate(180deg); } .NewsWidget .Table{ position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; height: auto; min-height: 50px; max-height: 280px; /*background-color: var(--color-lighter-gray--);*/ background-color: var(--color-white--); transition: max-height 0.3s ease-out; opacity: 0.9; overflow-x: hidden; overflow-y: auto; } .NewsWidget .Table_Empty{ max-height: 70px; } .NewsWidget .Table .EmptyNewsItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 10px); height: 50px; font-family: var(--primary-font--); font-size: 14px; line-height: 50px; text-align: center; color: var(--primary-text-color-dark-gray--); } .NewsWidget .Table .NewsItem{ position: relative; display: block; margin: 0 auto; margin: 5px; width: calc(100% - 11px); min-height: 50px; background-color: var(--color-white--); border: 1px var(--color-light-gray--) solid; cursor: pointer; } .NewsWidget .Table .NewsItem:hover{ background-color: var(--color-superlight-gray--) !important; } .NewsWidget .Table .NewsArticle{ position: relative; display: block; padding: 0px; padding-top: 30px; margin: 0 auto; top: 0px; left: 0px; width: 100%; max-width: 800px; height: auto; text-align: center; overflow-x: hidden; overflow-y: auto; overflow-wrap:normal; background-color: var(--color-white--); border: unset; overflow: hidden; } .NewsWidget .Table .NewsArticle .NewsArticleDateHolder{ position: absolute; display: block; top: 0px; right: 0px; padding-right: 20px; width: 100%; height: 30px; font-family: var(--primary-font--); font-size: 14px; line-height: 30px; text-align: center; color: var(--primary-text-color-dark-gray--); background-color: var(--color-superlight-gray--); border-bottom: 1px var(--color-light-gray--) solid; } @container DashboardViewWidgetsContainer (max-width: 640px){ .NewsWidget{ margin-left: 0px; margin-right: 1px; } .NewsWidget .Table{ max-height: unset; } }