.doc-card-link {
  text-decoration: none; }

.desktop {
  display: none; }
  @media screen and (min-width: 60rem) {
    .desktop {
      display: block; } }

.mobile {
  display: block; }
  @media screen and (min-width: 60rem) {
    .mobile {
      display: none; } }

@media screen and (min-width: 33.75rem) {
  .col-3-md.document-card {
    width: 47.2973%; } }

@media screen and (min-width: 60rem) {
  .col-3-md.document-card {
    width: 22.2973%; } }

.document-card__download {
  font-family: "Montserrat", "Tajawal", "Arial", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-style: italic;
  margin: 63px 90px 0 0;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  line-height: 1.19;
  text-align: left;
  position: absolute;
  bottom: 30px;
  width: 100%; }
  .document-card__download:lang(ar) {
    font-weight: 800; }
  .document-card__download:lang(ar) {
    font-style: normal !important;
    margin: 63px 0 0; }
  .document-card__download p.document-card__download-text {
    text-decoration: none;
    color: #f5333f; }
    .document-card__download p.document-card__download-text:after {
      background-image: url("../svg/download.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      right: 20px; }
      @media screen and (min-width: 60rem) {
        .document-card__download p.document-card__download-text:after {
          right: 50px; } }
    .document-card__download p.document-card__download-text:lang(ar):after {
      background-image: url("../svg/download.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      left: 20px;
      right: auto; }
      @media screen and (min-width: 60rem) {
        .document-card__download p.document-card__download-text:lang(ar):after {
          left: 50px;
          right: auto; } }

.document-card {
  padding: 10px 10px 50px;
  background-color: #ffffff;
  position: relative; }
  @media screen and (min-width: 60rem) {
    .document-card {
      height: 351px;
      padding: 0;
      flex: none; } }
  .document-card:hover {
    background-color: #12284c; }
    .document-card:hover > .document-card__inner > .document-card__back > .document-card__download p.document-card__download-text {
      color: #ffffff; }
      .document-card:hover > .document-card__inner > .document-card__back > .document-card__download p.document-card__download-text:after {
        background-image: url("../svg/download-white.svg"); }
    .document-card:hover > .document-card__inner > .document-card__back > .document-card__date,
    .document-card:hover > .document-card__inner > .document-card__back > .document-card__filetype,
    .document-card:hover > .document-card__inner > .document-card__back > .document-card__mobile-date-filetype .document-card__date,
    .document-card:hover > .document-card__inner > .document-card__back > .document-card__mobile-date-filetype .document-card__filetype.mobile,
    .document-card:hover > .document-card__inner > .document-card__back > .document-card__title,
    .document-card:hover > .document-card__back > .document-card__date.mobile {
      color: #ffffff; }

.document-card__date {
  font-family: "Montserrat", "Tajawal", "Arial", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: left;
  color: #12284c; }
  .document-card__date:lang(ar) {
    font-weight: 800; }
  @media screen and (min-width: 60rem) {
    .document-card__date {
      margin: 0 22px 17px 0; } }
  @media screen and (min-width: 60rem) {
    .document-card__date:lang(ar) {
      margin: 0 0 17px; } }

.document-card__filetype {
  font-family: "Open Sans", "Tajawal", "Arial", sans-serif;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.57;
  letter-spacing: normal;
  text-align: left;
  color: #666666;
  text-transform: uppercase; }
  @media screen and (min-width: 60rem) {
    .document-card__filetype {
      margin: 17px 0 10px; } }

.document-card__title {
  font-family: "Montserrat", "Tajawal", "Arial", sans-serif;
  font-style: normal;
  font-weight: 700;
  margin: 0 0 30px;
  font-size: 1rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  color: #12284c;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden; }
  .document-card__title:lang(ar) {
    font-weight: 800; }
  @media screen and (min-width: 60rem) {
    .document-card__title {
      margin: 10px 0 60px; } }

.view-display-id-regional_cluster_country_plans_page .document-card__title {
  word-break: break-all; }

.document-card__mobile-date-filetype {
  width: auto;
  bottom: 5px;
  position: absolute;
  margin: 25px 50px 0 0; }
  .document-card__mobile-date-filetype:lang(ar) {
    font-style: normal !important;
    margin: 25px 0 0; }

.document-card__date.mobile,
.document-card__filetype.mobile {
  display: inline-block; }
  @media screen and (min-width: 60rem) {
    .document-card__date.mobile,
    .document-card__filetype.mobile {
      display: none; } }

.document-card__front {
  display: none; }

@media screen and (min-width: 60rem) {
  .appeal .document-card__front {
    display: block; }
  .col-3-md.document-card.doc-card-link.appeal {
    background-color: transparent;
    perspective: 1000px; }
  .document-card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d; }
  .col-3-md.document-card.doc-card-link.appeal:hover .document-card__inner {
    transform: rotateY(180deg); }
  .document-card__front,
  .document-card__back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  .document-card__front {
    background-color: #ffffff; }
  .document-card__back {
    background-color: #ffffff;
    padding: 36px 25px 29px;
    transform: none; }
    .document-card__back:hover {
      background-color: #12284c; }
  .appeal .document-card__back {
    background-color: #12284c;
    color: #ffffff;
    padding: 36px 25px 29px;
    transform: rotateY(180deg); }
    .appeal .document-card__back a {
      color: #ffffff; }
  .appeal .document-card__title {
    color: #ffffff; }
  .appeal .document-card__filetype {
    color: #ffffff; }
  .appeal .document-card__date {
    color: #ffffff; }
  .appeal .document-card__download p.document-card__download-text {
    color: #ffffff; }
    .appeal .document-card__download p.document-card__download-text:after {
      background-image: url("../svg/download-white.svg"); } }