.title-font {
    font-family: 'Volkhov', serif;
}

.heading1-font {
    font-family: 'Cormorant Infant', serif;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 16px;
    font-family: 'Athiti', sans-serif;
}

body {
    margin-bottom: 60px;
    width: 100%;

}

.uk--blue-back-white-text {
    background-color: #1f2c5e;
    color: #fff;
}
.uk--white-back-blue-text {
    color: #1f2c5e;
    background-color: #fff;
}

.uk--blue-back-white-text-80transparent {
    background-color: rgba(31, 44, 94,.8);
    color: #fff;
}
.uk--light-blue-white-text {
    background-color: #0033a0;
    color: #fff;
}
.uk--light-blue-text {
    color: #0033a0;
}
.bg-grey {
    background-color: #e6e6e6;
}

.JournalPostColor {
    background-color: #6c84c2;
    color: #fff;
}


.thumbnail img {
    max-width: 90%;
    max-height: 300px;
    margin-bottom: 10px;
}
.JournalPost p, h3, h4 {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (min-width: 1200px) {
    .site-nav ul li:not(:last-child)::after {
        content: "";
        border: 1px solid #e2e2e2;
        border-width: 1px 1px 0 0;
        position: absolute;
        right: -3px;
        top: 25%;
        height: 50%;
    }

    .textStartLarger-textCenterMediumDown {
        text-align: start
    }

    .HideLargeShowMediumDown {
        visibility: hidden !important;
        display: none !important;
    }
}
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1199px) {
    .site-nav ul li:not(:last-child)::after {
        border: none;
    }

    .textStartLarger-textCenterMediumDown {
        text-align: center
    }

    .HideLargeShowMediumDown {
        visibility: visible;
        display: initial;
    }
}
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) {
    .hidelarger67 {
        visibility: hidden !important;
        display: none !important;
    }
    .showlarger767 {
        visibility: visible;
    }
    .maxWidthSmall {
        max-width: 50%;
    }
    .title-font{
        font-size: 5rem;
    }

}
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 767px) {
    .hidesmaller767 {
        visibility: hidden !important;
        display: none !important;
    }
    .showsmaller767 {
        visibility:visible;
        display:initial;
    }
    .maxWidthSmall {
        max-width: 100%;
    }
    .title-font {
        font-size: 3rem;
    }
}

.site-nav {
    font-size: 30px;
    font-family: 'Cormorant Infant', serif;
}

.site-nav  ul{
    list-style: none;
}

.site-nav  ul li{
    padding: 0 7px;
    position: relative;
}



.site-nav li.active a {
        border-bottom: 1px solid #e2e2e2;

}

.AdminNavbarContent li.active a {
    border-bottom: 1px solid #000000;
}


/*#JournalTopicMenu ul li.active{
    border: 1px solid;
    border-width: 0 0 0 1px;
}
#PodcastTopicMenu ul li.active {
    border: 1px solid;
    border-width: 0 0 0 1px;
}*/


.podcast-Journal-form-control:read-only {
    background-color: inherit;
    color: white
}
.form-control:read-write {
    color: black; 
    background-color: white;
}

.portraitUploadLabel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #6c84c2;
    color: white;
    padding: 0.5rem;
    font-family: sans-serif;
    border-radius: 0.3rem;
    cursor: pointer;
    opacity: .7;
}
.portraitUploadLabel:hover {
    background-color: #6c84c2;
    opacity: 1;
    cursor: pointer;
}

.custom-file-button input[type=file] {
    margin-left: -2px !important;
}

.custom-file-button input[type=file]::-webkit-file-upload-button {
        display: none;
}

.custom-file-button input[type=file]::file-selector-button {
        display: none;
}

.custom-file-button:hover label {
    background-color: #1f2c5e;
    opacity:.7;
    cursor: pointer;
}


.custom-select:disabled {
    background-color: inherit;
    color:white;

}
.custom-select:enabled {
    color: black;
}


/*Audo Plaryer*/


.audio-player {
    height: 50px;
    width: 100%;
    background: #1f2c5e;
    box-shadow: 0 0 20px 0 #000a;
    font-family: arial;
    color: white;
    font-size: 0.75em;
    overflow: hidden;
    display: grid;
    grid-template-rows: 6px auto;
    .timeline {
    background: white;
    width: 100%;
    position: relative;
    cursor: pointer;
    box-shadow: 0 2px 10px 0 #0008;
    .progress {
      background:#ffbf00;
      width: 0%;
      height: 100%;
      transition: 0.25s;
    }
  }
  .controls {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    padding: 0 20px;

    > * {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .toggle-play {
      &.play {
        cursor: pointer;
        position: relative;
        left: 0;
        height: 0;
        width: 0;
        border: 7px solid #0000;
        border-left: 13px solid white;
        &:hover {
          transform: scale(1.1);
        }
      }
      &.pause {
        height: 15px;
        width: 20px;
        cursor: pointer;
        position: relative;
        &:before {
          position: absolute;
          top: 0;
          left: 0px;
          background: white;
          content: "";
          height: 15px;
          width: 3px;
        }
        &:after {
          position: absolute;
          top: 0;
          right: 8px;
          background: white;
          content: "";
          height: 15px;
          width: 3px;
        }
        &:hover {
          transform: scale(1.1);
        }
      }
    }
    .time {
      display: flex;

      > * {
        padding: 2px;
      }
    }
    .volume-container {
      cursor: pointer;
      .volume-button {
        height: 26px;
        display: flex;
        align-items: center;
        .volume {
          transform: scale(0.7);
        }
      }
      
      position: relative;
      z-index: 2;
      .volume-slider {
        position: absolute;
        left: -3px; top: 15px;
        z-index: -1;
        width: 0;
        height: 15px;
        background: white;
        box-shadow: 0 0 20px #000a;
        transition: .25s;
        .volume-percentage {
          background: #ffbf00;
          height: 100%;
          width: 75%;
        }
      }
      &:hover {
        .volume-slider {
          left: -123px;
          width: 120px;
        }
      }
    }
  }
}



#name-container {
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.PodcastName {
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
}

/* for Firefox */
@-moz-keyframes my-animation {
  from { -moz-transform: translateX(100%); }
  to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
  from { -webkit-transform: translateX(100%); }
  to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
  from {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}



.menu-drag-item.dragging {
    opacity: 0.6;
}

.menu-drag-item.dragging :where(.details, i) {
        opacity: 0;
}


.sub-menu-drag-item.dragging {
    opacity: 0.6;
}

.sub-menu-drag-item.dragging :where(.details, i) {
        opacity: 0;
    }

.custom-multi-select-center-blue > .btn.dropdown-toggle.disabled.btn-light, .custom-multi-select-start-blue > .btn.dropdown-toggle.disabled.btn-light {
    background-color: #6c84c2;
    color: white;
    opacity: 1;
    border: 1px solid #ced4da !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.btn.dropdown-toggle.btn-light {
    border: 1px solid #ced4da !important;

}


.custom-multi-select .dropdown-item, .custom-multi-select .filter-option-inner-inner, .custom-multi-select-start-blue .dropdown-item, .custom-multi-select-start-blue .filter-option-inner-inner {
    text-align: start;
}

#newPodcastInterviewerInterviewee .bootstrap-select, updateUserPermissions .bootstrap-select, newUserPermisions .bootstrap-select {
    background-color: inherit !important;
}

.custom-multi-select-center .dropdown-item, .custom-multi-select-center .filter-option-inner-inner, .custom-multi-select-center-blue .dropdown-item, .custom-multi-select-center-blue .filter-option-inner-inner {
    text-align: center;
}

.carousel-indicators button {
    color: #6c84c2;
    background-color: #6c84c2 !important;
}
.carousel-indicators{
    bottom:1px !important;
}

.scroll-menu {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
}
div.side-nav-link:hover{
    background-color: darkgray;
}
div.side-nav-sub-menu-link:hover{
    background-color: darkgray;
}