audio {
	width: 100% ; 
}

textarea {
  resize: none;
}

.logout_btn {
  color: white;
}

a:hover {
  color: white;
}

table > caption {
	caption-side: top;
	text-align: center;
	color: black;
	font-weight: bold;
	font-size: 1.3em;
}

div .left-divider {
	border-left: 1px dashed #DDD;
	padding-left: 10px; 
}

div .bottom-divider {
	border-bottom: 1px solid #DDD;
	padding-bottom: 5px; 
	margin-bottom: 10px;
}

.col-10 {
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%;
}

.body-container {
	border: 2px solid #DDD;
	/* box-shadow: 0px 2px 0px #888888; */
  box-shadow: 0px 2px 0px #003e62;
	padding: 20px;
	border-radius: 10px;
}

.body-container-login {
	border: 2px solid #DDD;
	/* box-shadow: 0px 2px 0px #888888; */
  box-shadow: 0px 2px 0px #003e62;
	padding: 10px;
	border-radius: 10px;
}

.navbar {
	min-height: 100px;
  box-shadow: 0px 5px 5px #003e62;
}

.navbar-brand {
    width: 35%;
}

.navbar-brand > img {
    width: 100%;
}

.spaced-element {
    display: flex;
    justify-content: center;
    padding-left: 250px;
}

.annotate-row {
	margin-left: -5px;
	margin-right: -5px;
}

.fileinfo {
	text-align: left;
	color: white;
	height: 100%;
	width: 100%;
}

.player-container {
	padding-bottom: 20px;
	/* background-color: var(--gray-dark); */
  background-color: #052049 !important;
	border-radius: 10px;
}

.player-container > p {
	color: white;
}

.player-control {
	border-radius: 10px;
	width: 100%;
	padding-top: 0;
	padding-bottom: 0; 
}

.list-group-item
{
  height: auto;
}

.left-side {
	float: left; 
}
.right-side { 
	margin: auto;
	float: right;
} 
 
.split-items .list-group-item { 
	margin: 10px;
	width: 45%; 
  	border-radius: 4px;
  	/* box-shadow: 2px 2px 0px #888888; */
    box-shadow: 2px 2px 0px #003e62;
} 
 
.list-group-item-dark.disabled {
	background-color: var(--secondary);
}

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

#loader { 
    border: 12px solid #f3f3f3; 
    border-radius: 50%; 
    border-top: 12px solid #444444; 
    width: 70px; 
    height: 70px; 
    animation: spin 1s linear infinite; 
} 
  
@keyframes spin { 
    100% { 
        transform: rotate(360deg); 
    } 
} 
  
.center { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?1tm14u');
  src:  url('fonts/icomoon.eot?1tm14u#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?1tm14u') format('truetype'),
    url('fonts/icomoon.woff?1tm14u') format('woff'),
    url('fonts/icomoon.svg?1tm14u#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.required-field::after {
  content: "*";
  color: red;
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed position */
    z-index: 1; /* Sit on top */
    left: 10;
    top: 10;
    width: 40%; /* Full width */
    height: 40%; /* Full height */
    /* background-color: rgba(0,0,0,0.4); Black background with transparency */
    z-index: 1; /* Make sure it stays on top */
    justify-content: center; /* Horizontally center the modal */
    align-items: center; /* Vertically center the modal */
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close-btn {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 10px;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}

.icon-remove:before {
  content: "\f00d";
}
.icon-angle-double-left:before {
  content: "\f100";
}
.icon-angle-double-right:before {
  content: "\f101";
}
.icon-angle-left:before {
  content: "\f104";
}
.icon-angle-right:before {
  content: "\f105";
}
.icon-download3:before {
  content: "\e9c7";
}
.icon-upload3:before {
  content: "\e9c8";
}

.icon-large {
  font-size: 26px;
}