[role="tablist"] {
  min-width: 100%;
  display: flex;
}

[role="tab"],
[role="tab"]:focus,
[role="tab"]:hover {
  border: none;
  outline: none;
  font-weight: bold;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  padding: 1.7rem 3.2rem;
  
  cursor: pointer;
  transition: background-color 0.05s linear;
  font-weight: 800;
  flex: 1 1 auto;
}

@media screen and (max-width: 678px) {
  [role="tab"],
[role="tab"]:focus,
[role="tab"]:hover {
  padding: 4px;
}
}
@media screen and (max-width: 400px) {
  [role="tab"],
[role="tab"]:focus,
[role="tab"]:hover {
  padding: 4px 1px;
}
}

[role="tab"][aria-selected="true"] {
  background-color: #856B99;
  color: white;
  
}

[role="tab"][aria-selected="false"] {
  background-color: #4c9dbf;
  color: #ddd;
}
[role="tab"]:hover {
  background-color: rgba(133, 107, 153, 0.85);
  color: white;
}
[role="tab"] span.focus:not(.hidden) {
  display: inline-block;
  margin: 2px;
  padding: 4px 6px;
}

[role="tab"] span.focus.smLbl {
  display: none;
}
@media screen and (max-width: 480px) {
  [role="tab"] span.focus.smLbl:not(.hidden) {
    display: block;
  }
  [role="tab"] span.focus.gd:not(.smLbl),
  [role="tab"] span.focus.en:not(.smLbl) {
    display: none;
  } 
}

[role="tabpanel"] {
  padding: 5px;
  
  background-color: white;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32), 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
  min-height: 10em;
  width: 100%;
  overflow: auto;
}

[role="tabpanel"].is-hidden,
#tabpanel-GaelicEnglish.is-hidden {
  display: none;
}

[role="tabpanel"] h3 {
  padding: 0 2rem;
}
[role="tabpanel"] p {
  margin: 0;
}

#tabpanel-GaelicEnglish {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

#gdTranscript,#enTranscript {
  width: 49%;
}

.inlineTrans {
  display: block;
  margin-top: 1rem;
  font-style: italic;
  color: #888;
}


#tabpanel-Vocab {
  padding: 12px 20px;
}
#tabpanel-Vocab > div {
  display: flex;
  flex-wrap: wrap;
}

section.categories--portal .en-transcript > p {
  font-weight: 200;
}

@media screen and (max-width: 575px) {
  #gdTranscript{width: 100%;}
}


.spinner {
    position:absolute;
    top: 5%;
    left: calc(50% - 64px);
    width: 64px;
    height: 64px;
    border: 8px solid;
    border-color: #4C9DBF transparent #856B99 transparent;
    border-radius: 50%;
    animation: spin-anim 1.2s linear infinite;
}

@keyframes spin-anim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.transcript-tab-panel .content-vocabulary_item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  margin: 1em 1em 1em 0;
  padding: .5em;
  background: #EFEFEF;
  border-radius: .25em;
}

.transcript-tab-panel .content-vocabulary_item h3 {
  margin: 0 1em 0 0;
  padding: 0 1em;
  width: auto;
  border-right: 2px solid #fff;
  text-transform: none;
}


a.audiolink i{
  position: relative;
display: block;
  padding: .5em;
  width: 2.5em;
  height: 2.625em;
  min-width: 48px;
  min-height: 48px;
  pointer-events: none;
}

a.audiolink i.fa-pause {
  display: none;
}
.audiolink i.fa-play::before {
  position: absolute;
  
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23B6B6B6%22%20d%3D%22M14.44%2023.92c0%20.16-.09.32-.25.39-.16.05-.35.02-.46-.09l-4.47-4.47H6.1c-.23%200-.42-.18-.42-.42v-6.67c0-.23.19-.42.42-.42h3.15l4.47-4.47c.12-.12.3-.14.46-.09.16.07.25.23.25.39v15.85zm3.96-1.3l-1.18-1.16c-.16-.18-.16-.44%200-.6%202.69-2.69%202.69-7.04%200-9.72-.16-.16-.16-.42%200-.58l1.18-1.18c.16-.16.42-.16.58%200%203.66%203.66%203.66%209.58%200%2013.24-.17.16-.42.16-.58%200zm2.06%202.08c-.16-.19-.16-.44%200-.6%204.47-4.47%204.47-11.74%200-16.2-.16-.16-.16-.42%200-.58l1.18-1.18c.16-.16.42-.16.58%200%205.46%205.44%205.46%2014.28%200%2019.72-.16.16-.42.16-.58%200l-1.18-1.16z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-size: 120%;
  pointer-events: none;
  content: '';
}
.audiolink i.fa-pause::before {
  position: absolute;

  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2032%2032%22%20stroke-width%3D%221.5%22%20stroke%3D%22currentColor%22%20class%3D%22size-6%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M15.75%205.25v13.5m-7.5-13.5v13.5%22%20%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-size: 120%;
  pointer-events: none;
  content: '';
}

#link_to_dic {
    min-width: 48px;
    min-height: 48px;
    margin: 0 10px;
        cursor: pointer;
    padding: 0.3em 1.2em;
    border: 0.16em solid rgba(255,255,255,0);
    border-radius: 0.4em;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    transition: all 0.2s;
    }
    #link_to_dic:hover {
    border-color: rgba(255,255,255,0.5);
    }
    #link_to_dic:active {
    border-color: rgba(255,255,255,1);
    }


    .link_to_dic.on {
    background-color: #396643;
    color: white;
    }
      .link_to_dic.off {
    background-color: #d9d9d9;
    color: black;
    }

  .dlk {
    cursor: pointer; 
  }
  .dlk:hover {
    color: #735E7E;
    text-decoration: underline; 
  }