#maincontent,
.Events,
.Generic,
.Notes,
.Submission {
    position: relative
}

.text-container,
.text-content {
    position: relative;
    display: block
}

.dateContent-Announce,
.innerRow-Announce,
.textContent-Announce {
    font-family: "Gotham A", "Gotham B"
}

#maincontent {
    background-color: #fcfcfc;
    border: none
}

#aList {
    background-color: #fff;
    border-right: 2px solid #F6F6F6;
    border-top: 2px solid #F6F6F6;
    border-bottom: 2px solid #F6F6F6;
    margin-left: auto;
    margin-right: auto
}

#aList ul hr {
    margin: 58px 20px
}

.innerRow-Announce {
    font-size: 16px;
    font-weight: 700;
    padding-top: 30px;
    padding-bottom: 30px
}

.Events {
    border-left: 3px solid #990837
}

.Generic {
    border-left: 3px solid #00A2FF
}

.Notes,
.Submission {
    border-left: 3px solid #FFB400
}

.table-striped>tbody>tr:nth-of-type(odd) {
    border-left: 3px solid red
}

.announdesc {
    font-weight: 500;
    font-size: 12px
}

.announcerow {
    padding-bottom: 1%
}

.text-container {
    width: 85%;
    height: calc(2em + 10px);
    overflow: hidden;
    white-space: normal
}

.text-content {
    word-break: break-all;
    max-height: 3em
}

.ellipsis {
    position: absolute;
    right: 0;
    top: calc(4em + 5px - 100%);
    text-align: left;
    background: #fff
}

.headertext-container {
    width: 75%;
    height: calc(1em + 3px)
}

.headertext-content {
    max-height: 2em
}

.headertext-ellipsis {
    top: calc(2em + 0px - 100%)
}

.textContent-Announce {
    font-size: 16px;
    font-weight: 500
}

.dateContent-Announce {
    width: 97%;
    font-size: 14px;
    font-weight: 300;
    position: absolute;
    margin-left: 16%;
    margin-top: 4%;
    color: #2a2a2c
}

.popstyle ul {
    margin-bottom: 5px
}

.mediaList img {
    width: 100%;
    padding-top: 3%
}

#aList hr {
    margin-top: 0;
    margin-bottom: 0
}

.mediaList li {
    padding-top: 3px
}

.popstyle {
    top: 31px;
    left: 97%
}

.calendergrey-Announce {
    width: 13%
}

.iconShare {
    margin-left: 65%
}

.line-clamp {
    position: relative;
    height: 2.6em
}

.line-clamp:after {
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 1.2em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)
}

@supports (-webkit-line-clamp:2) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: 2.6em;
        height: auto
    }
    .line-clamp:after {
        display: none
    }
}
.announdesc:first-child {
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 300px;
}

.announdesc:first-child:before {
  content: ''; /* IE9 ellipsis fix */
}
@media only screen and (min-device-width:1200px) and (max-device-width:1680px) {
    .textContent-Announce {
        width: 100%;
        margin-top: 8px
    }
    .annoceIconType {
        width: 5%
    }
    .shareimg-Announce {
        padding-bottom: 30px
    }
    .calendergrey-Announce {
        width: 13%;
        margin-top: 3%
    }
    .dateRow-Announce,
    .shareRow-Announce {
        position: relative;
        margin-left: 0
    }
    .iconShare {
        margin-left: 65%;
        margin-top: 2%
    }
    .popstyle {
        top: 31px!important;
        left: 97%!important
    }
}

@media only screen and (min-device-width:970px) and (max-device-width:1200px) {
    .annoceIconType {
        width: 5%
    }
    .textContent-Announce {
        width: 100%;
        margin-top: 8px
    }
    .shareimg-Announce {
        padding-bottom: 30px;
        padding-left: 0
    }
    .calendergrey-Announce {
        width: 13%;
        margin-top: 3%
    }
    .dateContent-Announce {
        font-size: 11px
    }
    .dateRow-Announce,
    .shareRow-Announce {
        position: relative;
        margin-left: 0
    }
    .iconShare {
        margin-left: 65%
    }
    .popstyle {
        top: 31px!important;
        left: 96%!important
    }
}

@media only screen and (min-width:768px) and (max-width:969px) {
    .textContent-Announce {
        width: 100%;
        margin-top: 8px
    }
    .annoceIconType {
        width: 8%
    }
    .shareimg-Announce {
        padding-bottom: 30px;
        padding-left: 0
    }
    .calendergrey-Announce {
        width: 13%;
        margin-top: 3%
    }
    .dateRow-Announce,
    .shareRow-Announce {
        position: relative;
        margin-left: 0
    }
    .iconShare {
        margin-left: 65%;
        width: 30%
    }
    .popstyle {
        width: 3.5%;
        top: 31px!important;
        left: 96%!important
    }
    #aList {
        margin-left: auto;
        margin-right: auto
    }
}

@media only screen and (min-device-width:481px) and (max-device-width:768px) {
    .textContent-Announce {
        width: 100%;
        margin-top: 8px
    }
    .annoceIconType {
        width: 8%
    }
    .shareimg-Announce {
        padding-bottom: 30px;
        padding-left: 0
    }
    .calendergrey-Announce {
        width: 15%;
        margin-top: 8%
    }
    .dateRow-Announce,
    .shareRow-Announce {
        position: relative;
        margin-left: 0
    }
    .iconShare {
        margin-left: 65%
    }
    .popstyle {
        top: 31px!important;
        left: 96%!important
    }
    #aList {
        margin-left: auto;
        margin-right: auto
    }
}

@media only screen and (min-device-width:318px) and (max-device-width:480px) {
    .logoicon img {
        min-width: 45%
    }
    .menuicon img {
        width: 7%
    }
    .textContent-Announce {
        float: left;
        width: 100%;
        margin-top: 0
    }
    .announcerow {
        padding-bottom: 5%
    }
    .announdesc {
        max-height: 40px
    }
    .annoceIconType {
        width: 10%
    }
    .shareimg-Announce {
        padding-bottom: 30px
    }
    .calendergrey-Announce {
        width: 12%;
        margin-top: 3%;
        position: absolute
    }
    .dateContent-Announce {
        width: 97%;
        position: absolute;
        margin-left: 15%;
        margin-top: 4%;
        font-size: 11px!important
    }
    .dateRow-Announce {
        position: absolute;
        margin-left: 0;
        margin-top: 20%
    }
    .shareRow-Announce {
        position: absolute;
        margin-left: 73%
    }
    .popstyle {
        top: 31px!important;
        left: 86%!important
    }
    .popstyle ul {
        margin-bottom: 5px
    }
    #aList {
        margin-left: auto;
        margin-right: auto
    }
    .iconShare {
        position: absolute;
        width: 33%
    }
}

@media only screen and (min-device-width:321px) and (max-device-width:375px) {
    .shareRow-Announce {
        margin-left: 71%
    }
}

@media only screen and (min-device-width:318px) and (max-device-width:320px) {
    .dateRow-Announce {
        margin-top: 26%
    }
    .shareRow-Announce {
        margin-left: 73%
    }
    .popstyle {
        left: 91%!important
    }
    .iconShare {
        width: 45%
    }
}