/*
 *  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;
  }
}