--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Applications/StoneWebViewer/Resources/Styles/_helpers.scss	Tue Aug 11 13:24:38 2020 +0200
@@ -0,0 +1,1115 @@
+/*
+ *  Source code taken from private Osimis' frontend toolbox 3.2.1.
+ */
+
+/**
+    _overlay.scss
+ */
+.overlay__transparent{
+    position:fixed;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    z-index: 1;
+}
+
+/** _transition.scss **/
+.transition,
+%transition{
+    &{
+        transition: 0.3s all ease;
+    }
+}
+
+.transition--long,
+%transition--long{
+    &{
+        transition: 0.6s all ease;
+    }
+}
+
+
+/** _list.scss **/
+// This is used in the study information panel.
+dd+dt{
+    clear:both;
+}
+.listDefinition{
+    width:100%;
+    line-height: 1.3;
+}
+.listDefinition__term{
+    clear:both;
+    float:left;
+    text-align: right;
+    padding-right:10px;
+    width:50%;
+    @extend .font__light;
+
+}
+.listDefinition__data{
+    text-align: left;
+    padding-left:10px;
+    float:right;
+    width:50%;
+    @extend .font__normal;
+
+}
+
+
+/** _animation.scss **/
+@keyframes blink__primary {
+    0% { color: $primary; }
+    100% { color: $text-color; }
+}
+
+.blink__primary{
+  animation: blink__primary 0.8s linear infinite;
+}
+
+[translate-cloak]{
+    transition: 0.3s all ease;
+    opacity: 1;
+    &.translate-cloak{
+        opacity: 0;
+    }
+}
+
+/** _button.scss **/
+.button__unstyled,
+%button__unstyled{
+    background-color:inherit;
+    border:none;
+    text-decoration: none;
+    text-align:left;
+    padding:0;
+    cursor: pointer;
+    *{
+        pointer-events: none;
+    }
+    &:hover, &:active, &:focus{
+        outline:0;
+    }
+}
+.button__base,
+%button__base{
+    @extend .button__unstyled;
+    transition: 0.3s all ease;
+    //& *,& *:before,& *:after{
+    //  @extend .transition;
+    //}
+}
+.button__state--active{
+    @extend .button__base;
+    opacity:1;
+    &:hover{
+        opacity:0.9;
+        color:$primary;
+    }
+}
+.button__state--inactive{
+    @extend .button__base;
+    opacity:0.333;
+    &:hover{
+        opacity:0.4333;
+        color:$primary;
+    }
+}
+.button__iconed{
+    @extend .button__base;
+    opacity: 1;
+    &:hover, &:focus, &.active{
+        opacity: 0.75;
+        color:$primary;
+    }
+}
+.button__switch--base,
+%button__switch--base{
+    @extend .button__base;
+    padding:5px 0px;
+    display:inline-block;
+    text-align: center;
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    border-color: $primary;
+    background-color: white;
+    overflow: hidden;
+    &:hover, &:focus{
+        background-color: lighten($primary, 10);
+        color:white;
+    }
+    &.active{
+        background-color:$primary;
+        color:white;
+    }
+}
+.button__switch{
+    @extend .button__switch--base;
+}
+.button__switch--first{
+    @extend .button__switch--base;
+    border-left: 1px solid $primary;
+    border-radius: 5px 0 0 5px;
+}
+.button__switch--last{
+    @extend .button__switch--base;
+    border-right: 1px solid $primary;
+    border-radius: 0 5px 5px 0;
+}
+.button__lightgrey--hover{
+    @extend .button__base;
+    &:hover, &:focus, &.active{
+        background-color: $lightGrey;
+    }
+}
+.button__text-danger--hover{
+    @extend .button__base;
+    &:hover, &:focus, &.active{
+        color: $dangerColor;
+    }
+}
+.button__text-primary--hover{
+    @extend .button__base;
+    &:hover, &:focus, &.active{
+        color: $primary;
+    }
+}
+.button__danger--hover{
+    @extend .button__base;
+    &:hover, &:focus, &.active{
+        background-color: $dangerColor;
+        color:white;
+    }
+}
+.button__text{
+    @extend .button__base;
+    opacity:0.66;
+    &:hover, &.active, &:focus{
+        opacity:1;
+    }
+}
+.button__text--underlined{
+    @extend .button__base;
+    text-decoration: underline;
+    &:hover, &.active, &:focus{
+        text-decoration:none;
+    }
+}
+.button__bordered{
+    @extend .button__base;
+    border-bottom: 2px solid $text-color;
+    &:hover, &:focus, &.active{
+        border-color: $primary;
+    }
+}
+.button__bordered--inverted{
+    @extend .button__base;
+    border-bottom: 2px solid white;
+}
+.button__close{
+    @extend .button__base;
+    position:absolute;
+    top:0;
+    right:0;
+    opacity:0.6;
+    z-index:10;
+    &:hover, &:focus{
+        opacity:1;
+    }
+}
+
+
+/** _block.scss **/
+.block{
+    display: block !important;
+}
+
+
+/** _boxsizing.scss **/
+.boxsizing__borderbox{
+    box-sizing:border-box;
+}
+.boxsizing__contentbox{
+    box-sizing:content-box;
+}
+
+
+/** _scrollable.scss **/
+.scrollable{
+    overflow-y:auto;
+}
+.scrollable--x{
+    overflow-x:auto;
+}
+.no-scroll{
+    overflow:hidden;
+}
+
+
+/** _float.scss **/
+.float__right,
+%float__right{
+    float:right;
+}
+.float__left,
+%float__left{
+    float:left;
+}
+
+
+/** _fonts.scss **/
+.font__bold,
+%font__bold{
+    font-weight:600;
+}
+.font__normal,
+%font__normal{
+    font-weight: 400;
+}
+.font__light,
+%font__light{
+    font-weight: 200;
+}
+.fontColor__primary{
+    color:$primary;
+}
+.fontColor__lightGrey{
+    color:$lightGrey;
+}
+.fontColor__normal{
+    color:$text-color;
+}
+.fontColor__darker{
+    color:$darkGrey;
+}
+.fontColor__white{
+    color:white;
+}
+
+
+/** _forms.scss **/
+.textarea__unstyled{
+    border:none;
+    outline:none;
+    background-color:transparent;
+    color:inherit;
+    resize:none;
+    padding:0;
+    margin:0;
+    width:100%;
+}
+
+
+/** _position.scss **/
+.position__relative{
+    position: relative;
+}
+
+
+/** _margin.scss **/
+.margin__auto{
+    margin:auto;
+}
+
+
+/** _helpers.scss **/
+$steps: (
+    0,5,8,10,
+    11,12,13,14,15,16,17,18,19,20,
+    21,22,23,24,25,26,27,28,29,30,
+    31,32,33,34,35,36,37,38,39,40,
+    41,42,43,44,45,46,47,48,49,50,
+    55,60,64,65,70,72,75,80,85,90,95,96,100,
+    110,120,130,140,150,160,170,180,190,200,
+    210,220,230,240,250,260,270,280,290,300,
+    310,320,330,340,350,360,370,380,390,400,
+    410,420,430,440,450,460,470,480,490,500
+);
+
+
+/*************HELPERS**************/
+/**********************************/
+
+/*** identical width and height ***/
+@each $step in $steps {
+    .wh__#{$step} {
+        width: $step + px !important;
+        height: $step + px !important;
+    }
+    .lh__#{$step} {
+        line-height: $step + px !important;
+    }
+}
+.lh__1{
+    line-height: 1 !important;
+}
+.no-wrap{
+    white-space: nowrap;
+}
+
+.ov-h{
+    overflow: hidden;
+}
+.va-m{
+    vertical-align: middle;
+}
+.bg-inherit{
+    background-color:inherit;
+}
+.bg-black{
+    background-color: black;
+}
+.v-center{
+    &:before {
+        content: '';
+        display: inline-block;
+        height: 100%;
+        vertical-align: middle;
+        margin-top: -0.25em; /* Adjusts for spacing */
+    }
+}
+.fluid-height{
+    height:100%;
+}
+.visibility__hidden{
+    visibility: hidden;
+}
+
+.pointerEvents__none{
+    pointer-events: none;
+}
+
+/* Padding Helpers */
+.pn {
+  padding: 0 !important;
+}
+.p1 {
+  padding: 1px !important;
+}
+.p2 {
+  padding: 2px !important;
+}
+.p3 {
+  padding: 3px !important;
+}
+.p4 {
+  padding: 4px !important;
+}
+.p5 {
+  padding: 5px !important;
+}
+.p6 {
+  padding: 6px !important;
+}
+.p7 {
+  padding: 7px !important;
+}
+.p8 {
+  padding: 8px !important;
+}
+.p10 {
+  padding: 10px !important;
+}
+.p12 {
+  padding: 12px !important;
+}
+.p15 {
+  padding: 15px !important;
+}
+.p20 {
+  padding: 20px !important;
+}
+.p25 {
+  padding: 25px !important;
+}
+.p30 {
+  padding: 30px !important;
+}
+.p35 {
+  padding: 35px !important;
+}
+.p40 {
+  padding: 40px !important;
+}
+.p50 {
+  padding: 50px !important;
+}
+.ptn {
+  padding-top: 0 !important;
+}
+.pt5 {
+  padding-top: 5px !important;
+}
+.pt10 {
+  padding-top: 10px !important;
+}
+.pt15 {
+  padding-top: 15px !important;
+}
+.pt20 {
+  padding-top: 20px !important;
+}
+.pt25 {
+  padding-top: 25px !important;
+}
+.pt30 {
+  padding-top: 30px !important;
+}
+.pt35 {
+  padding-top: 35px !important;
+}
+.pt40 {
+  padding-top: 40px !important;
+}
+.pt50 {
+  padding-top: 50px !important;
+}
+.prn {
+  padding-right: 0 !important;
+}
+.pr5 {
+  padding-right: 5px !important;
+}
+.pr10 {
+  padding-right: 10px !important;
+}
+.pr15 {
+  padding-right: 15px !important;
+}
+.pr20 {
+  padding-right: 20px !important;
+}
+.pr25 {
+  padding-right: 25px !important;
+}
+.pr30 {
+  padding-right: 30px !important;
+}
+.pr35 {
+  padding-right: 35px !important;
+}
+.pr40 {
+  padding-right: 40px !important;
+}
+.pr50 {
+  padding-right: 50px !important;
+}
+.pbn {
+  padding-bottom: 0 !important;
+}
+.pb5 {
+  padding-bottom: 5px !important;
+}
+.pb10 {
+  padding-bottom: 10px !important;
+}
+.pb15 {
+  padding-bottom: 15px !important;
+}
+.pb20 {
+  padding-bottom: 20px !important;
+}
+.pb25 {
+  padding-bottom: 25px !important;
+}
+.pb30 {
+  padding-bottom: 30px !important;
+}
+.pb35 {
+  padding-bottom: 35px !important;
+}
+.pb40 {
+  padding-bottom: 40px !important;
+}
+.pb50 {
+  padding-bottom: 50px !important;
+}
+.pln {
+  padding-left: 0 !important;
+}
+.pl5 {
+  padding-left: 5px !important;
+}
+.pl10 {
+  padding-left: 10px !important;
+}
+.pl15 {
+  padding-left: 15px !important;
+}
+.pl20 {
+  padding-left: 20px !important;
+}
+.pl25 {
+  padding-left: 25px !important;
+}
+.pl30 {
+  padding-left: 30px !important;
+}
+.pl35 {
+  padding-left: 35px !important;
+}
+.pl40 {
+  padding-left: 40px !important;
+}
+.pl50 {
+  padding-left: 50px !important;
+}
+
+/* Axis Padding (both top/bottom or left/right) */
+.pv5 {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+}
+.pv8 {
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
+.pv10 {
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+}
+.pv15 {
+  padding-top: 15px !important;
+  padding-bottom: 15px !important;
+}
+.pv20 {
+  padding-top: 20px !important;
+  padding-bottom: 20px !important;
+}
+.pv25 {
+  padding-top: 25px !important;
+  padding-bottom: 25px !important;
+}
+.pv30 {
+  padding-top: 30px !important;
+  padding-bottom: 30px !important;
+}
+.pv40 {
+  padding-top: 40px !important;
+  padding-bottom: 40px !important;
+}
+.pv50 {
+  padding-top: 50px !important;
+  padding-bottom: 50px !important;
+}
+.ph5 {
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+}
+.ph8 {
+  padding-left: 8px !important;
+  padding-right: 8px !important;
+}
+.ph10 {
+  padding-left: 10px !important;
+  padding-right: 10px !important;
+}
+.ph15 {
+  padding-left: 15px !important;
+  padding-right: 15px !important;
+}
+.ph20 {
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+}
+.ph25 {
+  padding-left: 25px !important;
+  padding-right: 25px !important;
+}
+.ph30 {
+  padding-left: 30px !important;
+  padding-right: 30px !important;
+}
+.ph40 {
+  padding-left: 40px !important;
+  padding-right: 40px !important;
+}
+.ph50 {
+  padding-left: 50px !important;
+  padding-right: 50px !important;
+}
+
+/* margin center helper */
+.mauto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.mn {
+  margin: 0 !important;
+}
+.m1 {
+  margin: 1px !important;
+}
+.m2 {
+  margin: 2px !important;
+}
+.m3 {
+  margin: 3px !important;
+}
+.m4 {
+  margin: 4px !important;
+}
+.m5 {
+  margin: 5px !important;
+}
+.m8 {
+  margin: 8px !important;
+}
+.m10 {
+  margin: 10px !important;
+}
+.m15 {
+  margin: 15px !important;
+}
+.m20 {
+  margin: 20px !important;
+}
+.m25 {
+  margin: 25px !important;
+}
+.m30 {
+  margin: 30px !important;
+}
+.m35 {
+  margin: 35px !important;
+}
+.m40 {
+  margin: 40px !important;
+}
+.m50 {
+  margin: 50px !important;
+}
+.mtn {
+  margin-top: 0 !important;
+}
+.mt5 {
+  margin-top: 5px !important;
+}
+.mt10 {
+  margin-top: 10px !important;
+}
+.mt15 {
+  margin-top: 15px !important;
+}
+.mt20 {
+  margin-top: 20px !important;
+}
+.mt25 {
+  margin-top: 25px !important;
+}
+.mt30 {
+  margin-top: 30px !important;
+}
+.mt35 {
+  margin-top: 35px !important;
+}
+.mt40 {
+  margin-top: 40px !important;
+}
+.mt50 {
+  margin-top: 50px !important;
+}
+.mt70 {
+  margin-top: 70px !important;
+}
+.mrn {
+  margin-right: 0 !important;
+}
+.mr5 {
+  margin-right: 5px !important;
+}
+.mr10 {
+  margin-right: 10px !important;
+}
+.mr15 {
+  margin-right: 15px !important;
+}
+.mr20 {
+  margin-right: 20px !important;
+}
+.mr25 {
+  margin-right: 25px !important;
+}
+.mr30 {
+  margin-right: 30px !important;
+}
+.mr35 {
+  margin-right: 35px !important;
+}
+.mr40 {
+  margin-right: 40px !important;
+}
+.mr50 {
+  margin-right: 50px !important;
+}
+.mbn {
+  margin-bottom: 0 !important;
+}
+.mb5 {
+  margin-bottom: 5px !important;
+}
+.mb10 {
+  margin-bottom: 10px !important;
+}
+.mb15 {
+  margin-bottom: 15px !important;
+}
+.mb20 {
+  margin-bottom: 20px !important;
+}
+.mb25 {
+  margin-bottom: 25px !important;
+}
+.mb30 {
+  margin-bottom: 30px !important;
+}
+.mb35 {
+  margin-bottom: 35px !important;
+}
+.mb40 {
+  margin-bottom: 40px !important;
+}
+.mb50 {
+  margin-bottom: 50px !important;
+}
+.mb70 {
+  margin-bottom: 70px !important;
+}
+.mln {
+  margin-left: 0 !important;
+}
+.ml5 {
+  margin-left: 5px !important;
+}
+.ml10 {
+  margin-left: 10px !important;
+}
+.ml15 {
+  margin-left: 15px !important;
+}
+.ml20 {
+  margin-left: 20px !important;
+}
+.ml25 {
+  margin-left: 25px !important;
+}
+.ml30 {
+  margin-left: 30px !important;
+}
+.ml35 {
+  margin-left: 35px !important;
+}
+.ml40 {
+  margin-left: 40px !important;
+}
+.ml50 {
+  margin-left: 50px !important;
+}
+
+/* Axis Margins (both top/bottom or left/right) */
+.mv5 {
+  margin-top: 5px !important;
+  margin-bottom: 5px !important;
+}
+.mv10 {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+}
+.mv15 {
+  margin-top: 15px !important;
+  margin-bottom: 15px !important;
+}
+.mv20 {
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+}
+.mv25 {
+  margin-top: 25px !important;
+  margin-bottom: 25px !important;
+}
+.mv30 {
+  margin-top: 30px !important;
+  margin-bottom: 30px !important;
+}
+.mv40 {
+  margin-top: 40px !important;
+  margin-bottom: 40px !important;
+}
+.mv50 {
+  margin-top: 50px !important;
+  margin-bottom: 50px !important;
+}
+.mv70 {
+  margin-top: 70px !important;
+  margin-bottom: 70px !important;
+}
+.mh5 {
+  margin-left: 5px !important;
+  margin-right: 5px !important;
+}
+.mh10 {
+  margin-left: 10px !important;
+  margin-right: 10px !important;
+}
+.mh15 {
+  margin-left: 15px !important;
+  margin-right: 15px !important;
+}
+.mh20 {
+  margin-left: 20px !important;
+  margin-right: 20px !important;
+}
+.mh25 {
+  margin-left: 25px !important;
+  margin-right: 25px !important;
+}
+.mh30 {
+  margin-left: 30px !important;
+  margin-right: 30px !important;
+}
+.mh40 {
+  margin-left: 40px !important;
+  margin-right: 40px !important;
+}
+.mh50 {
+  margin-left: 50px !important;
+  margin-right: 50px !important;
+}
+.mh70 {
+  margin-left: 70px !important;
+  margin-right: 70px !important;
+}
+
+/* Negative Margin Helpers */
+.mtn5 {
+  margin-top: -5px !important;
+}
+.mtn10 {
+  margin-top: -10px !important;
+}
+.mtn15 {
+  margin-top: -15px !important;
+}
+.mtn20 {
+  margin-top: -20px !important;
+}
+.mtn30 {
+  margin-top: -30px !important;
+}
+.mrn5 {
+  margin-right: -5px !important;
+}
+.mrn10 {
+  margin-right: -10px !important;
+}
+.mrn15 {
+  margin-right: -15px !important;
+}
+.mrn20 {
+  margin-right: -20px !important;
+}
+.mrn30 {
+  margin-right: -30px !important;
+}
+.mbn5 {
+  margin-bottom: -5px !important;
+}
+.mbn10 {
+  margin-bottom: -10px !important;
+}
+.mbn15 {
+  margin-bottom: -15px !important;
+}
+.mbn20 {
+  margin-bottom: -20px !important;
+}
+.mbn30 {
+  margin-bottom: -30px !important;
+}
+.mln5 {
+  margin-left: -5px !important;
+}
+.mln10 {
+  margin-left: -10px !important;
+}
+.mln15 {
+  margin-left: -15px !important;
+}
+.mln20 {
+  margin-left: -20px !important;
+}
+.mln30 {
+  margin-left: -30px !important;
+}
+
+/* Vertical Negative Margin "mv" + "n" + "x" */
+.mvn5 {
+  margin-top: -5px !important;
+  margin-bottom: -5px !important;
+}
+.mvn10 {
+  margin-top: -10px !important;
+  margin-bottom: -10px !important;
+}
+.mvn15 {
+  margin-top: -15px !important;
+  margin-bottom: -15px !important;
+}
+.mvn20 {
+  margin-top: -20px !important;
+  margin-bottom: -20px !important;
+}
+.mvn30 {
+  margin-top: -30px !important;
+  margin-bottom: -30px !important;
+}
+
+/* Horizontal Negative Margin "mh" + "n" + "x" */
+.mhn5 {
+  margin-left: -5px !important;
+  margin-right: -5px !important;
+}
+.mhn10 {
+  margin-left: -10px !important;
+  margin-right: -10px !important;
+}
+.mhn15 {
+  margin-left: -15px !important;
+  margin-right: -15px !important;
+}
+.mhn20 {
+  margin-left: -20px !important;
+  margin-right: -20px !important;
+}
+.mhn30 {
+  margin-left: -30px !important;
+  margin-right: -30px !important;
+}
+
+/* Vertical Align Helpers */
+.va-t {
+  vertical-align: top !important;
+}
+.va-m {
+  vertical-align: middle !important;
+}
+.va-b {
+  vertical-align: bottom !important;
+}
+.va-s {
+  vertical-align: super !important;
+}
+
+/* Text Helpers */
+.text-left {
+  text-align: left !important;
+}
+.text-right {
+  text-align: right !important;
+}
+.text-center {
+  text-align: center !important;
+}
+.text-justify {
+  text-align: justify !important;
+}
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+/* Inline Block Helper */
+.ib,
+.inline-object {
+  display: inline-block !important;
+}
+
+.clear {
+  clear: both;
+}
+
+// warning popup
+
+.wvWarning {
+  position: relative;
+  width: 320px;
+  min-height: 130px;
+  z-index: 999;
+  left: calc(50% - 160px);
+  border: #000 solid 1px;
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+  color: #FF5722;
+  box-shadow: 0px 3px 23px #ff980078;
+  -webkit-animation-name: example;  /* Safari 4.0 - 8.0 */
+  -webkit-animation-duration: 3s;  /* Safari 4.0 - 8.0 */    
+  -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
+  animation-name: example;
+  animation-duration: 2s;    
+  animation-fill-mode: both;
+  animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes example {
+    from {top: 0vh;opacity: 0;background: #868686}
+    to {top: 10vh;opacity: 1;background: #ffffff}
+}
+
+@keyframes example {
+  from {top: 0vh;opacity: 0;background: #868686}
+    to {top: 10vh;opacity: 1;background: #ffffff}
+}
+
+.wvWarning-content{
+  position: relative;
+  width: 190px;
+  min-height: 88px;
+  max-height: 80vh;
+  margin: auto;
+}
+.wvWarning-icon{
+  font-size: 32px;
+}
+.wvWarning-text{
+  position: relative;
+}
+.wvWarning-button{
+  background-color: #f1ededcc;
+  color: #607D8B;
+  width: 50px;
+  font-weight: 600;
+  margin-top: 2px;
+  margin-right: 30px;
+}
+
+.wvScreenToSmallWarning {
+  position: fixed;
+  display: block;
+  top: 0;
+  left: 0;
+  background-color: white;
+  color: #333;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.wvScreenToSmallWarning-content {
+  padding: 10px;
+  text-align: center;
+}
+
+/* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */
+@media only screen and (min-width: 550px) and (min-height: 280px) { 
+  .wvScreenToSmallWarning {
+    display: none;
+  }
+}
+
+/* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */
+@media only screen and (min-width: 280px) and (min-height: 550px)  {
+  .wvScreenToSmallWarning {
+    display: none;
+  }
+}
\ No newline at end of file