/* Minification failed. Returning unminified contents.
(921,20): run-time error CSS1039: Token not allowed after unary operator: '-slider-left'
(952,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
:root {
    /*--theme-color: #477d9a;*/ /*royal blue - in use*/
    /*--theme-color: #009382;*/ /*eye green*/
    /*--theme-color: gray;*/
    /*--theme-color: #006b5e;*/ /*darker blue*/
    /*--theme-color:  #D36241 ;*/ /*red*/
}

@media all and (max-width:1245px) { /*1200px | 1289px 1110px | 290 (side) +470 (min Left culomn) + x (transition width)=1110 */
    /*#rightcolumn {
        min-width: 470px;
    }*/
    #leftcolumn, #rightcolumn {
        /*min-width: 520px !important;
        width: 63% !important;*/
        width: 75% !important;
        margin: 0 auto;
        padding: 0 !important;
        min-width: 515px;
    }

    .allPage {
        margin: 0px 0px 1em 0px !important;
    }

    .pageBody {
        padding: 1.5em 2.5em !important;
    }
}

@media all and (max-width:1070px) {
    #leftcolumn, #rightcolumn {
        width: 98% !important;
    }
}

@media all and (max-width:915px) {

    .relatedArticles, #infoMenuItems :nth-child(n + 6) {
        display: none !important;
    }

    .pageTitle {
        font-size: 1.7em !important;
    }
}

@media all and (max-width:850px) { /*820px*/
    left {
        display: none;
    }

    #collapsedMenu, #slogoImg {
        display: block !important;
    }

    .slogen > div:first-child {
        min-width: 0px !important;
    }

    menu > div:first-child {
        visibility: visible !important;
    }
}

@media all and (max-width:767px) {
    .ssk-sticky {
        display: initial !important; /*without this it will be "none" from this point*/
        /*white-space: nowrap;*/ /*will not be one row when screen to small (this is with js that changes class to bottom view)*/
    }

    #infoMenuItems :nth-child(n + 4) {
        display: none !important;
    }
}

@media all and (max-width:535px) { /*520px  everything in one column now*/

    #rightcolumn, #leftcolumn { /*.columnMinWidth*/
        width: 100% !important;
        min-width: initial !important;
    }

    middle {
        padding: 1em 0.5em !important;
    }

    #infoMenuItems a { /*, .related*/
        display: none !important;
    }

    .sScreen {
        width: 98% !important; /*needed for trasition around 550*/
        min-width: 230px;
        max-width: 350px;
        margin: 5px auto !important;
    }

    .tileVtext {
        min-height: initial !important;
    }

    .pageBody {
        padding: 1em !important;
    }

    #lastArchives {
        max-width: none;
    }
    /*.related, #btnTagDis {
        display: none !important;
    }*/
}

@media all and (max-width:420px) {
    .tileHr {
        flex-direction: column;
    }

        .tileHr .thumbnail {
            height: 150px;
            width: 100%;
        }
}

@media all and (max-width:380px) {
    .recommended > div {
        flex-direction: column;
    }

    .recommended img {
        height: 150px;
        width: 100%;
    }

    #lastArchives > div {
        min-width: 230px !important;
    }

    #topTile {
        width: 100% !important;
    }
}
/* -------------------------------------------------------------------------------------------------------- */
body {
    max-width: 1366px;
    font-family: calibri, 'Segoe UI', Verdana, sans-serif;
    /*font-family: Gisha, Arial, Helvetica, sans-serif;*/
    /*font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;*/
    /*background-color: #2e6d6f;*/
    /*background-color: #f9f9f9;*/
    background-color: #F2F2F2;
    /*background-color: #F7F7F5;*/
    /*font-size: 16px;*/
    font-size: 19px;
}

/*needed so line will go the whole width and not just body width*/
#headerBg {
    /*background-color: #808080;*/
    background-color: #477d9a; /*var(--theme-color);*/
    z-index: 10;
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

header {
    /*background-color: #f8f8f8;*/
    /*background-color: #808080;*/
    background-color: #477d9a; /*var(--theme-color);*/
    z-index: 10;
    position: fixed;
    /*transform: translateZ(0);*/ /*stop judder on mobile ?*/
    top: 0px;
    width: 100%;
    max-width: 1360px;
    /*max-width: 1345px;*/
    min-height: 40px; /*must be min-height cus when banner is up it will be bigger*/
}

menu > div:first-child {
    visibility: hidden;
    /*height: 35px;*/
}

    menu > div:first-child a {
        padding: 0px !important;
    }

#slogoImg {
    display: none;
    background: url(/Content/Images/logoSmall.png);
    background-size: 38px 38px;
    width: 38px;
    height: 38px;
    margin: 1px;
    border-radius: 1px;
}

#pmw {
    color: white;
    font-size: 0.8em;
    margin-left: 5px;
    width: 60px;
    line-height: 13px;
    text-shadow: 0px 0px 6px #505050;
    /*vertical-align: bottom;
    font-weight: bold;*/
}

#collapsedMenu {
    display: none;
    height: 40px;
    /*padding: 10px 1.5em;*/
    /*width: 22px;
    margin-top: 0.56em;
    margin-right: 1.5em;*/
}

/* This is overrid by js Layout "Menu banner space" and is here only to prevent flicker on load when no slogan is added */
main {
    margin-top: 40px;
}

left {
    min-width: 290px;
}

#leftcolumn { /*.columnMinWidth*/
    /*max-width:600px;*/
    /*min-width: 470px;*/
    min-width: 515px;
    width: 54%;
    /*width: 52%;*/
    padding-right: 5px;
}

#rightcolumn {
    width: 43%;
    /*width:40%;*/
    padding-left: 5px;
}
/*----------------------------- Read Page -----------------------------------------------*/
.allPage {
    margin: 0 2em;
}

.pageBody {
    background-color: white;
    padding: 1.5em 3.5em;
    margin: 10px 0;
    box-shadow: 0px 0px 2px 0px #dddddd;
    /*font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
    line-height: 1.4;
}

    .pageBody a {
        text-decoration: none;
    }

    .pageBody iframe, .pageBody img {
        max-width: 98%;
        margin: 0.5em;
    }

        .pageBody iframe:not(iframe[src$=".pdf"] ) {
            height: auto;
        }

    .pageBody figcaption {
        /*height: auto;*/
        margin: 0 1em 0.5em 1em;
    }

    .pageBody figure {
        margin: 0;
    }
    /*needed for when using link to jump in page, this way not covered by top menu when jumping*/
    .pageBody a:target {
        margin-top: -12px;
        padding-top: 60px;
    }

.pageTop {
    padding: 5px 5px 15px 0px;
    font-size: 14px;
}

blockquote:not(.twitter-tweet) {
    padding: 0.05em 1em;
    border-left: 0.35em solid silver;
    margin: 1em 0.5em 1em 0;
    background-color: #fbfbe3;
    /*clear: both;*/ /*option so img does not overlap and quote gets pushed down*/
}

span[name=note] {
    font-style: italic;
    white-space: pre-wrap; /*enables line break in notes*/
}

.textbox {
    width: 300px;
    background: #eeeeee;
    border: 1px solid #cccccc;
    padding: 10px 15px;
    margin: 8px;
}

    .textbox > p {
        margin-top: 0px;
    }

        .textbox > p:last-child {
            margin-bottom: 0;
        }
/* .right and .left to use with .textbox*/
.right {
    float: right;
}

.left {
    float: left;
}

/* ------------------------------------------------------ Google search box --------------------------------------------------------------*/

#searchBox {
    margin-right: 1em;
    height: 34px;
    text-align: center;
}

#closeSearch {
    margin-right: 0.9em;
    color: #CCCCCC;
    font-weight: bold;
    cursor: default;
}

.Gsearch {
    height: 40px;
    padding: 0 1em;
    background-color: rgba(255, 255, 255, 0.1); /*make existing header bg color lighter*/
}

    .Gsearch:hover .searchImg {
        background-color: darkslategray;
    }

/*works with css spirte that is in CatMenu.css*/
.searchImg {
    width: 22px;
    height: 22px;
    background: url('/Content/Images/sprite.png') -1px -1px;
}

.gs-image { /*prevent overlap of text and image in resultes - not clear why*/
    /*padding-right: -1em;*/
    margin: 0 !important;
}
/*title in results*/
.gs-title, .gs-title b {
    text-decoration: none !important;
    color: #2a358c !important;
}
/*url in results*/
.gs-visibleUrl {
    color: #8d8d8d !important;
}
/* more space between title and url*/
.gsc-url-top {
    margin-top: 2px;
}

#share {
    position: fixed;
    bottom: 0;
}

.shareRight {
    height: 100%;
    right: 0px;
    width: 40px;
}

    .shareRight > div {
        display: flex;
        align-items: center;
        height: 100%;
    }

.shareBottom {
    right: 0px;
    background-color: lightgray;
}

    .shareBottom > div {
    }

.icon {
    background-color: transparent !important;
}

    .icon img {
        background-color: white;
        border-radius: 3px;
        padding: 0 5px 0 2px;
        margin: 1px 0 0 0;
    }

#slide {
    margin-bottom: 50px !important;
}

.slideCaption {
    color: white;
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    position: absolute;
    display: block;
    padding: 1em;
    width: calc(100% - 2em);
}

.thumbnailSmall {
    width: 55px;
    height: 55px;
    margin: 0.4em 0.5em 0.4em 0.5em;
}

.pageItem {
    box-shadow: 0px 0px 2px -1px;
    background-color: white;
    border-radius: 1px;
}

    .pageItem * {
        /*color: #273695;*/
        text-decoration: none;
        /*font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
    }

.pageItemLine {
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    box-shadow: 0px 2px 1px -1px #dddddd;
}

.lineTop {
    padding-top: 0.5em;
    margin-top: 0.5em;
    box-shadow: 0px -2px 1px -1px #dddddd;
}

.thumbnail {
    margin-right: 1em;
}

.infoMenu {
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.slogen {
    padding: 0;
    margin: 0 -0.4rem 0 -0.4rem;
}

    .slogen > div:first-child {
        min-width: 290px;
    }

.infoMenu a {
    padding: 0 0.9em;
    /*color: #DDEEFF;*/
    /*background-color: rgba(0,0,0,1);*/
    line-height: 40px; /*must be line-height and not height so text v align can be middle*/
    vertical-align: middle;
    color: #fdfdfd;
    text-decoration: none;
    text-shadow: -.25px -.25px 0 transparent, .25px .25px transparent;
}

    .infoMenu a:hover {
        text-shadow: -.25px -.25px 0 white, .25px .25px white;
    }

/*not sure why, but without this it is auto margin 16*/
.fromInput {
    height: 15px;
    border-right: none;
}

.dateInput {
    height: 17px;
    border: none;
    border-radius: 2px;
    padding: 3px;
    padding-right: 0px;
    font-size: 12px;
    width: 115px;
}

.titleColor {
    color: #477d9a; /*var(--theme-color);*/
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 0.5);
    font-weight: 500;
    /*font-size: larger;*/
    margin: 0.3em 0;
}

.more {
    color: #477d9a;
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 0.5);
    font-weight: 500;
    padding-right: 0.3em;
}

    .more span {
        margin-left: auto;
    }

/*»*/
/*.more::after{
        content:"\00BB"; 
    }*/

.emphasis {
    background-color: #fe6c00;
}

    .emphasis:hover {
        background-color: #fe9000;
    }

.sectionTitle {
    padding: 0.1em 0;
    /*border-top: 2px solid slategray;*/
    border-top: 1px solid silver;
    margin: 0.4em 0 3px 0;
    font-size: 0.9em;
}

    .sectionTitle a {
        /*color: #477d9a;*/
        color: #477d9a; /*var(--theme-color);*/
        margin-right: 5px;
    }

/*in filterd page*/
.sectionTitle2 {
    padding: 0.1em 0;
    /*border-top: 2px solid slategray;*/
    margin: 0.3em 0;
    /*font-size: 0.9em;*/
    font-size: 14px;
}

.bShadow {
    box-shadow: 0px 1px 3px -1px rgba(0,0,0,0.75);
}

.tShadow {
    box-shadow: 0px -5px 10px #e7e7e7;
}

.linkText {
    color: black;
    /*font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/ /*Kalinga; */
    text-decoration: none;
}

.recommended {
    width: 100%;
    /*min-width: 380px;*/
}

    .recommended > div {
        margin-bottom: 5px;
    }

/*.specialFont {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.regularFont {
    font-family: Gisha, Arial, Helvetica, sans-serif;
    line-height: 1.3em;
}*/

.textHoverShadow * a:hover, a[class~=textHoverShadow]:hover {
    text-shadow: 1px 1px 5px rgba(163, 13, 13, 0.4);
}

/*---------------------------------------------------------- Tiles ------------------------------------------------------------------*/

.txtOnImg {
    position: relative;
    margin: 0 5px 10px 5px;
    box-shadow: 0px 0px 3px -1px;
}

    .txtOnImg img {
        width: 100%;
        vertical-align: top;
    }

    .txtOnImg > div {
        position: absolute;
        top: 0;
        bottom: 0px;
        left: 0;
        right: 0; /*width:100% doest work*/
        /*background-color: rgba(0, 0, 0, 0.8);*/
        padding: 10px;
    }

    .txtOnImg .tileVbottom {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

        .txtOnImg .tileVbottom > a {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

            .txtOnImg .tileVbottom > a:first-child {
                color: white;
                text-decoration: none;
                /*font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
            }

        .txtOnImg .tileVbottom a div:first-child {
            font-size: 1.1em;
            font-weight: bold;
            display: flex;
            flex-grow: 1;
            align-items: flex-end;
        }

#topTile .tileVbottom a div:first-child {
    font-size: 1.2em;
    text-shadow: 0 0 2px black,0 0 10px black,0 0 10px black,0 0 10px black;
}

#topTile.txtOnImg .tileVbottom a div:not(:first-child) {
    line-height: 1.35em;
}

.txtOnImg .tileVtagDate > * {
    text-decoration: none;
    color: #aeaeae;
}

.txtOnImg .tileVtagDate a:hover {
    color: #ff9898;
}

.txtOnImg.tileS img {
    min-height: 160px;
}

#topTile.txtOnImg > div {
    background: linear-gradient(transparent,transparent,rgba(0, 0, 0,0.8),rgba(0, 0, 0,0.9));
}

#topTile.txtOnImg:hover > div {
    background: linear-gradient(transparent,transparent,rgba(0, 0, 0,0.9),rgba(0, 0, 0,1));
}

.tileS.txtOnImg > div {
    background: linear-gradient(transparent,rgba(0, 0, 0,0.8),rgba(0, 0, 0,0.9));
}

.tileS.txtOnImg:hover > div {
    background: linear-gradient(transparent,rgba(0, 0, 0,0.9),rgba(0, 0, 0,1));
}

.tileHover:hover {
    box-shadow: 0px 0px 4px -1px !important;
}

    .tileHover:hover img, .imageHoverContrast:hover img {
        filter: contrast(1.2);
    }

.btnCss + label {
    padding: 0;
    display: flex;
    width: 140px;
    height: 20px;
    font-size: 12px;
    border: 1px solid #d2d2d2;
    border-radius: 5px;
    background-color: #e7e7e7;
    color: #000;
    position: relative;
    left: 110px;
    top: -31px;
    margin-bottom: -27px; /*remove empty space*/
}

    .btnCss + label span:nth-child(2) {
        border: 1px solid white;
        border-radius: 3px;
        background-color: white;
    }

    .btnCss + label span:first-child, .btnCss + label span:last-child {
        overflow: hidden;
        transition: all 0.2s linear;
    }

    .btnCss + label span:first-child {
        /*background-color: lightblue;*/
        width: 0;
        padding: 0;
    }

    .btnCss + label span:last-child {
        width: 100%;
        padding: 4px 4px 4px 6px;
    }

.btnCss:checked + label span:first-child {
    width: 100%;
    padding: 4px 4px 4px 6px;
}

.btnCss:checked + label span:last-child {
    width: 0;
    padding: 0;
}

.relatedArticles > div:nth-of-type(2) {
    margin-left: 0.5em;
}

.relatedArticles span {
    font-size: 0.8em;
}

.relatedArticles > .titleColor {
    font-size: 0.9em;
    margin: 0 0.3em;
}
/*---------------------------------------------------------- Home Elements ------------------------------------------------------------------*/

.slogen .banner {
    margin-top: 4px;
}

.banner p {
    margin: 0;
}

.banner img {
    width: 100%;
}

.banner div * {
    width: initial;
}

/*.related {
    font-size: 0.9em;
    padding: 6px;
    min-height: 111px;
}

    .related a {
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
        font-weight: 500;
        padding-left: 5px;
        border-left: solid #477d9a 1px; 
        margin-bottom: 0.6em;
    }

        .related a:hover {
            text-shadow: 1px 1px 5px rgba(163, 13, 13, 0.4);
        }*/


#lastArchives > div {
    /*height:250px;*/
    /*min-width: 283px;*/
    min-width: 325px;
    flex-grow: 1;
}

/*order space in display tags from catigorie title*/
.disTagSpace > *:first-child {
    min-width: 72px;
}
/*---------------------------------------------------------- layout Elements ------------------------------------------------------------------*/

#smallLogo {
    height: initial !important;
    background-color: white;
    padding: 3px 3px 3px 1px;
    border-radius: 1px;
}

#collapsedMenuShow {
    display: none;
    background: #494B4F; /*black;*/
    /*opacity: 0.9;*/
    position: fixed;
    top: 40px;
    left: 50%;
    min-width: 14em;
    /*margin-left: -37.5%;*/
    margin-left: -50%;
    z-index: 5;
    overflow: scroll;
}

.Gsearch2 {
    padding: 0 0.5em;
}

#collapsedMenuInfo {
    border-bottom: 1px solid #333333;
}

    #collapsedMenuInfo a {
        color: white;
        padding: 0.5em;
    }

#collapsedMenuCat {
    padding-bottom: 3.5em;
}

    #collapsedMenuCat a {
        color: whitesmoke;
        font-size: larger;
        border-bottom: 1px solid #333333;
        padding: 0.3em 0.5em;
    }

    #collapsedMenuCat span {
        color: whitesmoke;
        background-color: #35383E;
        font-size: larger;
        padding: 0.5em 0.5em;
        font-weight: bold;
        border-bottom: 1px solid #333333;
    }

.pageShareSmall {
    width: 100%;
    padding-top: 0.2em;
    box-shadow: 0px -1px 2px 0px rgba(50, 50, 50, 0.5);
    background-color: #F2F2F2;
    display: flex !important;
    justify-content: center;
}

    .pageShareSmall a {
        /*margin: 0.1em 0.2em !important;*/
        width: 20%; /*35px*/
        height: 25px;
    }


/*---------------------------------------------------------- page pdf ------------------------------------------------------------------*/
.pdfIframe {
    color: blue;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid lightgray;
    cursor: pointer;
    font-size: 0.9em;
}

    .pdfIframe:hover {
        background-color: lightgray;
    }

/* ------------------------------------------------------------ Slider -------------------------------------------- */
#sliderCon {
    position: relative;
}

#slider {
    overflow: hidden;
    max-width: 500px;
    min-height: 300px;
    position: relative;
}

    #slider:hover:before {
        content: "⏸";
        padding: 0 3px 5px 5px;
        background: rgba(255, 255, 255, 0.2);
        color: lightgray;
        border: 1px solid lightgray;
        border-radius: 3px;
        margin: 5px;
        position: absolute;
        font-size: 1.5em;
        top: 0;
        right: 0;
        z-index: 1;
    }

    #slider figure {
        position: relative;
        /* width number of images+1 times 100 - done with js */
        /*   width: 700%; */
        margin: 0;
        left: var(--slider-left);
        display: grid;
        /* repeat number is images+1 - done with js */
        /* grid-template-columns: repeat(6, 1fr); */
    }

    #slider img {
        width: 100%;
        filter: blur(0);
        max-height: 400px; /*does not keep aspect ratio*/
    }

figureDescription {
    position: absolute;
    bottom: 0;
    left: 50%;
    padding: 15px;
    color: white;
    text-align: center;
    width: 95%;
    transform: translate(-50%);
    background: linear-gradient(rgba(0, 0, 0, 0.5), black);
    opacity: 1;
    transition: opacity 0.8s;
}

.fade {
    opacity: 0;
}

:root {
    --slider-left: 0;
}

#imgJumper {
    width: 100%;
    display: flex;
    justify-content: center;
}

    #imgJumper span {
        border-radius: 50%;
        background-color: #9e9e9e;
        border: 5px solid #9e9e9e;
        width: 11px;
        height: 11px;
        margin: 8px 5px;
        transition: 0.5s;
        cursor: pointer;
    }

        #imgJumper span:hover {
            border-color: #b1b1b1;
        }

        #imgJumper span:first-child {
            background-color: #636363;
        }

.flexStart {
    display: flex;
    justify-content: flex-start;
}

.flexSpace-between {
    display: flex;
    justify-content: space-between;
}

.flexSpace-around {
    display: flex;
    justify-content: space-around;
}

.flexCenter {
    display: flex;
    align-items: center;
    /*justify-content: center;*/
}

.flexJustifyCenter {
    display: flex;
    justify-content: center;
}

.flexAlignContetCenter {
    display: flex;
    align-content: center;
}

.flexJustifyEnd {
    display: flex;
    justify-content: flex-end;
}

.flexEnd {
    display: flex;
    align-items: flex-end;
}

.FlexItemEnd {
    align-self: flex-end;
}

.FlexItemCenter {
    align-self: center;
}

.FlexItemShrink {
    flex-shrink: 2; /* default 1 */
}

.flexColumn {
    display: flex;
    flex-direction: column;
}

.flexRow {
    display: flex;
    flex-direction: row;
}

.flexWrap {
    display: flex;
    flex-wrap: wrap;
}

.flexNoWrap {
    display: flex;
    flex-wrap: nowrap;
}
/*.flexWrapToColumn{
    display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column wrap;
   align-content: stretch;
}*/
.flex {
    display: flex;
}

.flexItemGrow1 {
    flex-grow: 1;
    /*flex-shrink:2;*/
}

.flexItemSize0 {
    flex-grow: 0;
    /*flex-shrink:2;*/
}

.flexPairWrap {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

    .flexPairWrap > * {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        flex-grow: 1;
    }
/*
.flexItemSize2{
    flex-grow:2;
    flex-shrink:1;
}*/

/*font-size: 16px;*/
/*font-size:13.4px= smaller*/
.box {
    box-sizing: border-box;
}

.height100pc, .allSpace {
    height: 100%;
}

.width100pc {
    width: 100%;
}

.width95pc {
    width: 95%;
}

.width50pc {
    width: 48%;
    /*margin: 7px !important;*/
}

.width45pc {
    width: 45%;
}

.width75pc {
    width: 75%;
}

.width33pc {
    width: 33%;
}

.noBreak {
    white-space: nowrap;
}

.wrap {
    white-space: pre-wrap;
}

.margins {
    margin: 0.5em;
}

.rMargin {
    margin-right: 0.5em;
}

.lMargin {
    margin-left: 0.3em;
}

.lrMargin {
    margin-left: 0.6em;
    margin-right: 0.6em;
}

.bMargin {
    margin-bottom: 0.3em;
}

.marginTop {
    margin-top: 0.3em;
}

.tbMargin {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

.marginAuto {
    margin: 0 auto;
}

.border {
    border: 1px solid silver;
}

.bBorder {
    border-bottom: 1px solid silver;
}

.tBorder {
    border-top: 1px solid silver;
}



.lBorderWidth {
    border-left: 1px solid silver;
    /*width:35%;*/
    max-width: 35%;
    min-width: 35%;
}

.paddings {
    /*padding: 1em;*/
    padding: 8px;
}

.Tpadding {
    padding-top: 0.5em;
}

.bPadding {
    padding-bottom: 0.6em;
}

.tbPadding {
    padding: 0.8em 0;
}

.rlPadding {
    padding: 0 0.8em;
}

.lBorder {
    border-left: 1px solid silver;
    padding-left: 0.2em;
    margin-left: 0.2em;
}
/*.rBorder{
    border-right: 1px solid silver;    
    padding-right:0.2em;
    margin-right:0.2em;
}*/
.noDecoration {
    /*border-bottom: 1px solid silver;*/
    text-decoration: none;
}

    .noDecoration a {
        text-decoration: none;
    }

.smaller {
    /*font-size: smaller;*/
    font-size: 0.8em;
}

.larger {
    /*font-size: larger;*/
    font-size: 1.1em;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

.darkBg {
    background: rgba(0,0,0,0.1);
}

.darkerBg {
    background: rgba(0,0,0,0.5);
}

.textshadow {
    text-shadow: 1px 1px 3px rgba(150, 150, 150, 0.8);
}

.textShade {
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}

.textGray {
    color: gray;
}

.textRed, .validation-summary-errors, .msg, .field-validation-error {
    color: red;
}

.italic {
    font-style: italic;
}

.title {
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
    margin: 0px;
}

.pageTitle {
    font-weight: bold;
    font-size: 2em;
    margin: 0.1em 0;
    line-height: 1.2em;
}

.floatclear {
    clear: both;
    overflow: hidden;
}

.centerText {
    text-align: center;
}

.rightText {
    text-align: right;
}

.inline {
    display: inline;
}

.inlineBlock {
    display: inline-block;
}

.block {
    display: block;
}

.none {
    display: none;
}

.absolute {
    position: absolute;
}

.stickyHeader {
    position: sticky;
    top: 0px;
    background: white;
}

.hidden {
    visibility: hidden;
}

.table {
    display: table;
}

.tableRow {
    display: table-row;
}

.tableCell {
    display: table-cell;
}

.circle {
    background: rgba(255, 255, 255,0.3);
    text-align: center;
    border-radius: 50%;
    /*border: 1px solid;*/
    padding: 0 0.5em;
    /*border: 1px solid silver;*/
    width: 1em;
    height: 1em;
    /* width and height can be anything, as long as they're equal */
}

.borderR {
    border-radius: 3px;
}

.fontGeorgia {
    font-family: Georgia;
    font-size: 11px;
}

.fontArial {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

.blackText {
    color: black;
}

.cursorWait {
    cursor: wait;
}

.cursorPointer {
    cursor: pointer;
}

.checkboxNice + label {
    user-select: none;
    padding: 4px;
}

.checkboxNice {
    display: none;
}

    .checkboxNice:checked + label {
        /*text-shadow: #000 0px 1px 1px;*/
        font-weight: bold;
    }

        .checkboxNice:checked + label:before {
            color: white;
        }

    .checkboxNice + label:before {
        content: "\2714";
        font-size: 0.9em;
        border: 1px solid #a8cecf;
        border-radius: 4px;
        display: inline-block;
        width: 1em;
        height: 1em;
        padding: 1px 0px 0px 2px;
        color: #7ec3c4;
        /*color: transparent;*/
        background-color: #7ec3c4;
        margin-right: 4px;
    }


.switch-selection {
    display: block;
    position: absolute;
    top: 2px;
    width: 70px;
    height: 22px;
    /*background: #65bd63;*/
    /*border-radius: 3px;*/
    border-radius: 1px;
    /*background-image: linear-gradient(to bottom, #9dd993, #65bd63);*/ /*gradinant on selected, light to dark*/
    background-image: linear-gradient(to bottom, #8dd1db, #639cba);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
    transition: left 0.15s ease-out;
}
.posDatabase {
    left: 63%;
}
.pos {
    left: 31.5%;
}
.posAnalysis {
    left: 2px;
}
/*This is positioned with js in catmenu.js because when tooltip over end of menu it is cut off (overlay-position problem)*/
.tooltips {
    position: relative;
}

    .tooltips .tooltipText {
        position: absolute;
        top: 31px;
        left: 4px;
        width: 228px;
        white-space: nowrap;
        padding: 0 0.5em;
        background: #000000;
        height: 30px;
        line-height: 30px;
        visibility: hidden;
        border-radius: 1px;
        color: #FFFFFF;
        text-align: center;
        font-family: calibri, 'Segoe UI', Verdana, sans-serif;
        font-size: 14px;
        text-shadow:none;
        font-weight:normal;
    }

    .tooltips .circle {
        position: relative;
        width: auto;
        height: auto;
        color: #7a7a7a;
        font-weight: normal;
    }

    .tooltips label:hover .circle:after {
        position: absolute;
        bottom: -11px;
        left: -29px;
        content: '';
        opacity: 0.8;
        margin-left: -8px;
        width: 0;
        height: 0;
        border-bottom: 8px solid #000000;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
    }

    .tooltips label:hover .tooltipText {
        visibility: visible;
        opacity: 0.8;
    }

.tileS {
    /*width: 220px;*/
    width: 205px; /*need this for flex-grow to work, and so not too big that couse wrap in small screen*/
    flex-grow: 1;
    max-width: 350px;
    /*min-height: 400px;*/
    box-shadow: 0px 0px 2px -1px;
    margin: 0 5px 10px 5px;
    background: white;
}

    .tileS img {
        width: 100%;
        height: 150px;
    }

        .tileS img:hover {
            -webkit-filter: contrast(1.1);
            filter: contrast(1.1);
        }

    .tileS * {
        text-decoration: none;
    }

.tileStext {
    display: block;
    margin: 0 auto;
    color: black;
    /*font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
    font-size: 1.1em;
    padding: 6px;
    font-weight: bold;
}

.tileStagDate {
    padding: 0 6px 6px 6px;
}

    .tileStagDate * {
        color: #666666;
        /*font-family: Gisha;*/
        font-size: 0.8em;
        border-left: 1px solid #477d9a;
        padding-left: 3px;
    }

    .tileStagDate a:hover {
        /*color: #ab4343;*/
        text-shadow: 1px 1px 5px rgba(163, 13, 13, 0.4);
    }

.tileV {
    width: 40%; /*need this for flex grow to wrok*/
    max-width: 350px;
    /*width: 255px;*/
    flex-grow: 1;
    /*min-height: 400px;*/
    box-shadow: 0px 0px 3px -1px;
    margin: 0 5px 10px 5px;
    background-color: #fbfbfb;
}

/*does not line up well in different screens without this, and so not too big that couse wrap in small screen*/
/*.tileVfilter {
    width: 220px; 
}*/

.tileVbottom {
    padding: 0 8px 8px 8px;
}

    .tileVbottom div {
        margin-top: 8px;
    }

.tileV * {
    text-decoration: none;
}

.tileV img {
    width: 100%;
}

.whiteBG {
    background-color: white;
}

.tileVtagDate {
    border-left: 1px solid #477d9a;
    padding-left: 3px;
    margin-top: 6px;
}

.tileHr .tileVtagDate {
    border: none;
    padding-left: 0;
}

.tileVtext {
    /*min-height: 190px;*/
    color: black;
    /*font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;*/
    width: 100%;
}

.tileVtagDate * {
    color: #666666;
    /*font-family: Gisha, Arial, Helvetica, sans-serif;*/
    font-size: 13px;
    /*max-width: 66%;*/
    align-self: flex-end;
}

.tileVtagDate > * {
    max-width: 66%;
}

.tileVtagDate a:hover {
    text-shadow: 1px 1px 5px rgba(163, 13, 13, 0.4);
}

.tileVtext div:first-child {
    font-weight: bold;
    font-size: 1.1em;
}

.tileVtext div:not(:first-child) {
    line-height: 1.35em;
}

.typeBadge {
    display: grid;
    grid-template: "stack";
}

    .typeBadge > * {
        grid-area: stack;
    }

    .typeBadge .badgeImg {
        width: 17px;
        place-self: end left;
        padding:2px;
    }


#logo {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 8px;
}

#sideMenu {
    font-size: 15px;
    line-height: 1em;
    z-index: 11;
    position: fixed;
    top: 0.0em;
    /*top: 50%;
    transform: translateY(-50%);*/
    width: 250px;
    /*max-height: 94.5%;*/
    background-color: #e7e7e7;
    /*background-color:#EEEDEC;*/
    margin: 4px;
    padding: 0.4em 1em; /*1em 1em;*/
    overflow: hidden;
    box-shadow: 0px 0px 2px -1px;
    height: 97%;
}
/*overflow - this works for ff*/
#sideMenuInner {
    overflow-y: auto;
    overflow-x: hidden;
    /*position: relative;*/
    width: 110%;
}
/*overflow - fix for edge*/
@supports (-ms-ime-align:auto) {
    #sideMenu {
        overflow: initial;
    }

    #sideMenuInner {
        width: 105%;
    }
}

#typeSwitch {
    margin: 0 auto 0.5em auto;
    border-radius: 1px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    /*background: rgba(0, 0, 0, 0.15);*/
    /*box-shadow: inset 0 1px 1px rgba(126, 195, 196, 0.5), 0 1px rgba(126, 195, 196, 0.1);*/
}

/*need this so end of item is not far and pop is neer, but not for .pop cus there ok*/
/*not sure this does anything*/
/*#sideMenuInner .menuItem {
    width: 250px;
}*/

.menuItem > * {
    display: flex;
    align-items: center;
}

/*overflow - fix for chrome - not yet working*/
/*#sideMenuInner:not(*:root) {
    min-height: 640px;
}*/
/*::-webkit-scrollbar {
    display:none;
     width: 0px; 
}
::-webkit-scrollbar-thumb {
    background: #FF0000;
}*/

.togUl {
    display: none;
}

.pop { /*popMenu -  used in js */
    position: fixed;
    z-index: 12;
    background: #e7e7e7;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.9);
    padding: 0.3em 0 0.2em 0;
    min-width: 260px;
    /*Eitan - scroll in pop menu*/
    max-height: 50vh; /*limit height to look normal*/
    overflow-y: auto; /*make sure everything is accessible */
    overflow-x: hidden;
}
   
    .pop a, #sideMenu a {
        text-decoration: none;
        white-space: nowrap;
        color: black; /*need this so link wont be blue*/
    }

    .pop a, #sideMenuInner a {
        padding: 0 .3em;
        font-size: 14px;
        margin-right:4px;
    }

.menuGroup {
    margin-bottom: 2px;
    margin-top: 2px;
}

.selected {
    font-weight: bold;
}

.unusable {
    color: rgba(0, 0, 0,0.5) !important; /* rgba(255, 255, 255,0.4); color: lightgray;*/
    cursor: default;
    padding-left: 2em !important;
}

/*#duration input {
    width: 118px;
}*/

/* Generated by https://www.toptal.com/developers/css/sprite-generator/ CSS Sprite Generator */

.grayfacebook {
    width: 26px;
    height: 22px;
    background: url('/Content/Images/sprite.png') -1px -25px;
}

.graytwitter {
    width: 26px;
    height: 22px;
    background: url('/Content/Images/sprite.png') -1px -49px;
}

.grayyoutube {
    width: 26px;
    height: 22px;
    background: url('/Content/Images/sprite.png') -1px -73px;
}

.fb:hover {
    background-color: #4285F4;
}

.twitter:hover {
    background-color: #60D0F2;
}

.youtube:hover {
    background: linear-gradient(white,white),linear-gradient(#C3181E,#C3181E); /*#F20000,#F20000);*/
    background-position: 0 0,0 40%;
    background-size: 100% 45%, 100% 100%;
    background-repeat: no-repeat;
}

.social_follow {
    margin-top: 0.4em;
}

    .social_follow a {
        margin: 0 5px;
    }

    .social_follow .social /*img*/ {
        height: 22px;
        width: 26px;
    }

.mail {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 19px !important;
    border-radius: 2px;
    background-color: #666666;
    /*margin-top: 1px !important;*/
    padding: 0px 5px 3px 5px;
}

.mailIcon {
    font-size: 20px;
    /*font-weight:normal!important;*/
}

.mail div {
    /*padding: 0 0.3em 0 0.2em;*/
    /*font-style: italic;*/
    /*font-weight: 600;*/
    color: #eaeaea;
    white-space: nowrap;
}

.mail:hover div {
    color: lightgoldenrodyellow;
}

.mail:hover img {
    background-color: lightgoldenrodyellow;
}

.con {
    cursor: pointer;
    display: inline-block;
    padding: 9px 1em;
}

    .con span {
        display: block;
        height: 2px;
        width: 20px;
        border-radius: 9px;
        background: #ccc;
        margin: 4px auto;
        transition: all 0.4s ease;
    }

#btnControl:checked + label .top {
    transform: translateY(6px) rotateZ(45deg);
}

#btnControl:checked + label .bottom {
    transform: translateY(-6px) rotateZ(-45deg);
}

#btnControl:checked + label .middle {
    width: 0;
}

#btnControl {
    display: none;
}

/*
    use with this:
    <input type="checkbox" id="btnControl" />
                    <label for="btnControl" class="con">
                        <span class="top"></span>
                        <span class="middle"></span>
                        <span class="bottom"></span>
                    </label>
*/