/* System Modeler - Modelling tools comparison

   ========================================================================== */

#features a {
    text-decoration: none !important;
}
#_product-name {
    visibility: hidden;
}

main {
	display: grid;
}

/* ==========================================================================
   Intro
   ========================================================================== */

div#pageWrapper * {
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
}
#whyIntroWrapper * {
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
}
#whyIntroWrapper {
    margin: 0 auto;
    width: 63.4375rem;
    max-width: 100%;
    text-align: left;
    padding: 1.875rem 0 0 1.25rem;
    background: url('/system-modeler/modeling-tools-comparison/img/drawing-intro.png') no-repeat 560px 52px;
}
#whyIntroWrapper h1, #whyIntroWrapper p {
    margin-left: 0.375rem;
}
#whyIntroWrapper p {
    width: 31.875rem;
    max-width: 100%;
    margin-top: 1.25rem;
    margin-bottom: 1.5625rem;
    font-size: 0.9275rem;
    line-height: 1.4;
}
#whyIntroWrapper .podContainer {
    margin: 0;
    width: 31.8125rem;
    max-width: 100%;
}
#whyIntroWrapper .podGrayBG {
    padding: 0.625rem 0 0.625rem 1.25rem;
}
#whyIntroWrapper div#jumpto {
    width: 26.875rem;
    max-width: 100%;
}
#jumpto .podColumn {
    float: left;
}
.podColumn.left {
    width: 12.5rem;
    max-width: 100%;
}
.podColumn.right {
    width: 12.5rem;
    max-width: 100%;
}
#jumpto ul {
    padding-bottom: 0;
}
#jumpto ul li {
    padding: 0 0.625rem 0.4375rem 1.25rem;
    background: url("/system-modeler/img/SMjumpTo.png") no-repeat 0px 5px;
    list-style-type: none;
}
#jumpto .allCapSubHeader {
    margin: 0 0 0.625rem;
}
#whyIntroWrapper h1 {
    color: #dd1100;
    font-weight: 400;
    font-size: 2.53125rem;
    margin: 0.5em 0rem 0.25em;
    line-height: 1.2;
}
#whyIntroWrapper p, #simplify p, #advantage p, #beyond p {
    color: #636363;
    font-size: 0.875rem;
    line-height: 1.45rem;
    font-weight: 400;
    margin-top: 0.35em;
}
/* main, general */

#pageWrapper.whyyy {
    margin: 0 auto;
    width: 63.4375rem;
    max-width: 100%;
    text-align: left;
}
.whyyy h2 {
    width: 905px;
    max-width: 100%;
    margin: 0 0 1.25rem;
    padding-top: 1.875rem;
    border-top: 1px solid #adadad;
}
.whyyy p {
    font-size: 0.875rem;
}
#pageWrapper.whyyy h2.fakeh1 {
    font-weight: 300;
    color: #202020;
    font-size: 31.5px;
    margin: 0.625rem 0 1.875rem;
    line-height: 2.5rem;
}
#gl-legacy-inner-td-2 {
    width: 0rem;
}
/* product comparison */

div#comparison {
    margin-top: 0;
}
#table-legend {
    width: 56.3125rem;
    max-width: 100%;
    text-align: right;
    font-size: 0.6875rem;
    color: #8e8e8e;
}
#table-legend img {
    margin: 0 0.4375rem 0 1.25rem;
    vertical-align: middle;
}
.podContainer#comparetable {
    position: relative;
    left: -6px;
    width: 57.0625rem;
    max-width: 100%;
    margin-top: 0.25rem;
}
.podBGPS {
    background: #fff;
    padding: 0;
}
table.superTable {
    /*width: 56.3125rem;
    max-width: 100%;*/
    max-width: 56.3125rem;
    width: 100%;
}
table.superTable td, table.superTable th {
    vertical-align: top;
    padding: 0.75rem 5px .625rem;
    border-top: 1px solid #dadada;
    border-left: 1px solid #dadada;
    text-align: center;
}
table.superTable th {
    vertical-align: middle;
    background: #fff;
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: bold;
    color: #e00400;
}
table.superTable td.light, table.superTable th.light {
    vertical-align: middle;
    background: #F3F3F3;
    color: #828282;
}
table.superTable td h2, table.superTable td h3 {
    margin-bottom: 0;
    line-height: 1.125rem;
}
table.superTable td.firstcell, table.superTable td.firstcellTitle {
    padding-left: 0.9375rem;
    text-align: left;
}
table.superTable td.othercell, table.superTable th.othercell {
    width: 16%;
}
table.superTable th.othercell.light {
    border-left: none;
}
table.superTable td.additional {
    font-size: 0.75rem;
    color: #222;
}
table.superTable td span {
    padding-left: 0.9375rem;
    font-size: 0.9rem;
}
table.superTable td span span {
    padding-left: 1.25rem;
    margin: 0 auto;
    width: 63.4375rem;
    max-width: 100%;
    text-align: left;
}
/* adding to supertable*/
table#tabs th {
    border: 1px solid #dadada;
    cursor: pointer;
}
table#tabs {
    margin-bottom: 2rem;
}
table#tabs .othercell.leftmost {
    border-left: 0;
    border-left: 1px solid #dadada;
}
#tabs .othercell.active {
    background: #ee3939;
    border-top: 3px solid #ee3939;
    color: #fff;
}
th#systemmodeler.active {
    border-left: none !important;
}
#tabs tr th:nth-child(3).active {
    border-right: none !important;
}
#tabs th.othercell:not(.active){
    border-top: 3px solid #ee3939;
    box-sizing: border-box;
}
.no-display {
    display: none !important;
}
.display {
    display: table-cell !important;
}
/* simplify workflow */

div#simplify {
    margin-top: 5rem;
}
#simplify div.introduction {
    height: 298px;
    background: url('/system-modeler/modeling-tools-comparison/img/drawing-simplify.png') no-repeat 541px 1.875rem;
}
#simplify p {
    width: 31.25rem;
    max-width: 100%;
}
/* modelica advantage */

div#advantage {
    margin-top: 5rem;
}
#advantage div.introduction {
    height: 385px;
    background: url('/system-modeler/modeling-tools-comparison/img/drawing-modelica.png') no-repeat 574px 56px;
}
#advantage p {
    width: 31.875rem;
    max-width: 100%;
}
/* beyond simulation */

div#beyond {
    margin-top: 5rem;
}
#beyond div.introduction {
    height: 400px;
    background: url('/system-modeler/modeling-tools-comparison/img/drawing-beyond.png') no-repeat 594px 41px;
}
#beyond p {
    width: 33.75rem;
    max-width: 100%;
}
div#featuresbox {
    position: relative;
    width: 830px;
    max-width: 100%;
    height: 444px;
    background: url('/system-modeler/modeling-tools-comparison/img/features-chart.png') no-repeat 157px 20px;
}
div.featurelabel {
    position: absolute;
    width: auto;
    height: auto;
    background: #f4f4f4;
    border: 1px solid #dadada;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #404040;
    text-align: center;
}
.featurelabel div {
    margin: 0 0.75rem;
}
.featurelabel#analysis {
    top: 0px;
    left: 310px;
    width: 215px;
}
.featurelabel#modeldev {
    top: 83px;
    left: 616px;
}
.featurelabel#report {
    top: 186px;
    left: 635px;
}
.featurelabel#simulation {
    top: 280px;
    left: 600px;
}
.featurelabel#visualization {
    top: 349px;
    left: 332px;
    width: 150px;
}
.featurelabel#signal {
    top: 297px;
    left: 53px;
}
.featurelabel#control {
    top: 210px;
    left: 13px;
}
.featurelabel#import {
    top: 130px;
    left: 45px;
}
.featurelabel#presentation {
    top: 50px;
    left: 0px;
}
.centerlized-button {
    width: 30rem;
    max-width: 100%;
    margin: 0 auto 3.75rem 17.75rem;
}
.whyyy .button-orange, .whyyy .button-orange:link, .whyyy .button-orange:visited {
    display: inline-block;
    padding: 0.4375rem 0.9375rem;
    border: 0 none;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
    background: #ff8b24;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.whyyy .button-orange:hover, .whyyy .button-orange:active {
    color: #fff;
    background: #ff7027;
}

/*taken from m8.css and adapt for modeling-tools-comparison page*/
div#pageWrapper {
    overflow: hidden;
    padding: 1.875rem 0 0 1.8125rem;
}
.podContainer .podShadowTop {
    width: 100%;
    overflow: hidden;
}
.podContainer {
    margin: 0 0 1.25rem 0;
}
.podContainer .podShadowTopLeft {
    background: url(/common/images2010/m8/podTopShadow.png) no-repeat top left;
    height: 6px;
    width: 95%;
    float: left;
}
.podContainer .podShadowTopRight {
    background: url(/common/images2010/m8/podTopShadow.png) no-repeat bottom right;
    height: 6px;
    width: 5%;
    float: left;
}
.allCapSubHeader {
    font-size: 0.75rem;
    color: #555;
}
.podContainer .podShadowLeft {
    background: url(/common/images2010/m8/podSideShadow.png) repeat-y left;
}
.podContainer .podShadowRight {
    background: url(/common/images2010/m8/podSideShadow.png) repeat-y right;
}
div.podShadowBottomLeft {
    background: url(/common/images2010/m8/podBottomShadow.png) no-repeat top left;
    height: 6px;
    width: 95%;
    float: left;
}
div.podShadowBottomRight {
    background: url(/common/images2010/m8/podBottomShadow.png) no-repeat bottom right;
    height: 6px;
    width: 5%;
    float: left;
}
.podContainer .podContent {
    padding: 0 0.375rem;
}
.podContainer .podGrayBG {
    background: #f9f9f9;
    border-top: 1px solid #e3e3e3;
}
.podContainer #jumpto ul {
    padding-bottom: 0;
    margin: 0.8125rem 0;
}
.podContainer .podContent {
    padding: 0 0.375rem;
}
.podContainer ul {
    color: #666;
    line-height: 100%;
    padding: 0;
    padding-bottom: 6px;
}
.podContainer ul.jumpto li {
    background: url(/common/images2010/m8/jumpTo.png) no-repeat;
}
.podContainer ul li {
    background: url(/common/images2010/m8/red_bullet.gif) no-repeat 0px 5px;
    font: 0.8125rem/1.3 Arial, Helvetica, sans-serif;
    padding-left: 0.9rem;
    margin: 0rem 0 0 0;
    padding-bottom: 7px;
}
.podContainer ul {
    color: #666;
    line-height: 100%;
    padding: 0;
    padding-bottom: 0.375rem;
}
.podContainer ul li a, ul li a:link {
    color: #666;
}
.podContainer a, a:link {
    color: #e00400;
    outline: none;
}
.podContainer a, object, embed {
    outline: 0;
}
.podContainer ul li {
    background: url(/common/images2010/m8/red_bullet.gif) no-repeat 0px 5px;
    font: 0.8125rem/1.3 Arial, Helvetica, sans-serif;
    padding-left: 0.9rem;
    margin: 0em 0 0 0;
    padding-bottom: 0.4375rem;
}
.podContainer ul li {
    background: url(/common/images2010/m8/red_bullet.gif) no-repeat 0px 5px;
    font: 0.8125rem/1.3 Arial, Helvetica, sans-serif;
    padding-left: 0.9rem;
    margin: 0rem 0 0 0;
    padding-bottom: 0.4375rem;
}
.podContainer ul {
    color: #666;
    line-height: 100%;
    padding: 0;
    padding-bottom: 0.375rem;
}
.podContainer .clearingFloats {
    clear: both;
}
.podContainer .podGrayBG {
    background: #f9f9f9;
    padding: 1.25rem 1.25rem 1.25rem 1.875rem;
    border-top: 1px solid #e3e3e3;
}
.podContainer .redbar {
    border-top: 3px solid #ee3939;
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
    /*    common*/
    div#pageWrapper {
        padding: 1.875rem 1.8125rem 0 1.8125rem;
    }
    .podContainer#comparetable {
        left: unset;
    }
    /*    beyond simulation*/
    #beyond div.introduction {
        background: url(/system-modeler/modeling-tools-comparison/img/drawing-beyond.png) no-repeat 503px 41px;
    }
    #advantage div.introduction {
        background: url(/system-modeler/modeling-tools-comparison/img/drawing-modelica.png) no-repeat 516px 56px;
    }
    #simplify div.introduction {
        background: url(/system-modeler/modeling-tools-comparison/img/drawing-simplify.png) no-repeat 514px 1.875rem;
    }
    .centerlized-button {
        margin: 0 auto 3.75rem 19.4rem;
    }
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    /*    common*/
    #whyIntroWrapper {
        background: none;
    }
    #whyIntroWrapper p {
        width: 100%;
    }
    #whyIntroWrapper {
        padding: 1.875rem 1.25rem 0 1.25rem;
    }
    /*    intro*/
    .jumpto.reduce {
        margin-bottom: -0.6875rem !important;
    }
    #whyIntroWrapper .podGrayBG {
        border-right: 1px solid #dadada;
        border-left: 1px solid #dadada;
    }
    /*    footer - try-buy-upgrade*/
    #try-buy-upgrade .level-2 {
        padding: 0 .625rem;
    }
    /*    modelica advantage*/
    #advantage div.introduction,
    #simplify div.introduction {
        height: auto;
    }
    /*    super table*/
    table.superTable td span {
        padding-left: 0;
    }
    /*    beyond simulation*/
    #advantage div.introduction,
    #simplify div.introduction,
    #beyond div.introduction {
        background: none;
    }
    #beyond div.introduction {
        height: auto;
        margin-bottom: 2rem;
    }
    #beyond p, #advantage p, #simplify p {
        width: 100%;
    }
    .centerlized-button {
        margin: 0 auto 3.75rem auto;
        text-align: center;
    }
    div#featuresbox {
        height: 542px;
        background: url(/system-modeler/modeling-tools-comparison/img/features-chartx900.png) no-repeat center center;
        background-size: auto;
        width: 540px;
        margin: 0 auto 3rem auto;
    }
    .featurelabel#analysis {
        top: 3px;
        left: 172px;
        width: 195px;
    }
    .featurelabel#modeldev {
        top: 94px;
        left: 351px;
    }
    .featurelabel#presentation {
        top: 50px;
        left: -60px;
    }
    .featurelabel#import {
        top: 111px;
        left: 7px;
    }
    .featurelabel#report {
        top: 395px;
        left: 421px;
    }
    .featurelabel#visualization {
        top: 516px;
        left: 219px;
        width: 110px;
    }
    .featurelabel#simulation {
        top: 452px;
        left: 323px;
    }
    .featurelabel#signal {
        top: 456px;
        left: 100px;
    }
    .featurelabel#control {
        top: 401px;
        left: 0px;
    }
}

/* styles for medium screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    /*    common*/
    #_product-name {
        visibility: visible;
    }
    div#pageWrapper {
        padding: 1.875rem 0.625rem 0 .625rem;
    }
    #whyIntroWrapper {
        padding: 1.875rem 0.625rem 0 0.625rem;
    }
    #whyIntroWrapper .podContainer {
        margin: 0 auto;
    }
    /*    supertable*/
    #mainTable tr td:nth-child(3),
    #mainTable tr td:nth-child(4) {
        display: none;
    }
    #mainTable, table.superTable {
        border-right: 1px solid #dadada;
    }
    table.superTable td span {
        padding-left: 0;
    }
    .podContainer .redbar {
        border-top: 1px solid #dadada;
    }
    #comparetable .othercell.firstcol {
        display: none;
    }
    div#table-legend {
        margin-bottom: 1rem;
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        text-align: left;
    }
    table#tabs {
        margin-bottom: 0.9rem;
    }
    #table-legend img {
        margin: 0 0.4375rem 0 0rem;
    }
    #table-legend span {
        margin-right: 0.5rem;
        display: flex;
        align-items: flex-start;
    }
    /*    beyond simulation*/
    div#featuresbox {
        height: 538px;
        background: url(/system-modeler/modeling-tools-comparison/img/features-chartx600.png) no-repeat center center;
        width: 275px;
    }
    div#featuresbox span {
        display: block;
        text-align: center;
    }
    .featurelabel#analysis {
        top: -11px;
        left: 87px;
        width: 103px;
    }
    .featurelabel#import {
        left: -19px;
    }
    .featurelabel#modeldev {
        left: 189px;
    }
    .featurelabel#control {
        top: 390px;
        left: -31px;
    }
    .featurelabel#signal {
        top: 449px;
        left: 40px;
    }
    .featurelabel#simulation {
        top: 434px;
        left: 155px;
    }
    .featurelabel#report {
        top: 375px;
        left: 210px;
    }
    .featurelabel#visualization {
        left: 81px;
    }
}

/* styles for medium screens (320px)
   ========================================================================== */

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