/*
    * blue: #184ea4
    * light blue: #4d81ba
    * cyan: #92c8e2
    * red: #ab3122
    * ornage: #e27e33
    * light orange: #bd7755
    * purple: #541a95
    * green: #26972d
    * off-white: #f4f4f4
*/

.war {
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 38px; /*37.7952755906px*/
    width: 151px; /*151.1811023622px*/
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.outer, .inner {
    flex: 1;
    position: relative;
}

.war_1948 {
    background: #184ea4;
}

.war_1948 .outer {
    max-width: 7px;
    background: #92c8e2;
    border-right: 7px solid #f4f4f4;
    border-left: 7px solid #f4f4f4;
}
.war_1948 .inner {
    margin: 0 1.65rem;
    max-width: 7px;
    background: #ab3122;
    position: relative;
}

.war_1956 {
    background: #e27e33;
}
.war_1956 .outer {
    max-width: 16px;
    background: #184ea4;
}
.war_1956 .inner {
    border-right: 8px solid #ab3122;
    border-left: 8px solid #ab3122;
    max-width: 24px;
    background: #92c8e2;
    position: relative;
}

.war_1967 {
    background: #b00;
}
.war_1967 .outer {
    max-width: 26px;
    background: #184ea4;
}
.war_1967 .inner {
    max-width: 12px;
    background: #92c8e2;
    border-right: 12px solid #f4f4f4;
    border-left: 12px solid #f4f4f4;
    position: relative;
}

.war_1970 {
    background: #bd7755;
}
.war_1970 .outer {
    max-width: 10px;
    background: #92c8e2;
    border-right: 10px solid #f4f4f4;
    border-left: 10px solid #f4f4f4;
}
.war_1970 .inner {
    background: #ab3122;
    max-width: 14px;
    margin: 0 1.05rem;
}

.war_1973 {
    background: #4d81ba;
}
.war_1973 .outer {
    border-right: 8px solid #f4f4f4;
    border-left: 8px solid #f4f4f4;
    max-width: 8px;
}
.war_1973 .inner {
    background: #ab3122;
    max-width: 44px;
}

.war_1982 {
    background: #ab3122;
}
.war_1982 .outer {
    max-width: 16px;
    background: #541a95;
    border-right: 8px solid #f4f4f4;
    border-left: 8px solid #f4f4f4;
}
.war_1982 .inner {
    max-width: 8px;
    background: #ab3122;
    border-right: 8px solid #26972d;
    border-left: 8px solid #26972d;
}

.war_2006 .outer {
    background: #e27e33;
}
.war_2006 .outer::before {
    content: '';
    height: 50px;
    background: #184ea4;
    width: 12px;
    position: absolute;
    border-right: 10px solid #f4f4f4;
    border-left: 10px solid #f4f4f4;
}
.war_2006 .outer:first-child::before {
    left: 0;
}
.war_2006 .outer:last-child::before {
    right: 0;
}
.war_2006 .inner {
    background: #ab3122;
    max-width: 28px;
    border-right: 10px solid #26972d;
    border-left: 10px solid #26972d;
}

.example-ribbon {
    background: #c0a;
    transition: 125ms all ease-in-out;;
}
.example-ribbon .outer {
    border-right: 12px double #fa9;
    border-left: 8px double rgba(100, 150, 200, 0.9);
    max-width: 8px;
}
.example-ribbon .inner {
    background: #349;
    max-width: 44px;
}