:root {
	--very-dark: #121212;
	--dark-grey: #2a2929;
	--mid-grey: #545151;
	--light-grey: #f0f0f0;
	--accent: #5647ae;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	color: #717e81;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-size: 1rem;
	line-height: 28px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 16px;
    line-height: 1.5;
	clear: both;
	color: #222;
	font-weight: 400;
	font-family: 'Montserrat', sans-serif;
}

p {
	margin: 0 0 1.5em;
}

p:last-child {
	margin: 0;
}

dfn, cite, em, i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
    padding: 15px;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* ///////////////////////////////////////////////////////// */
/* CUSTOM STYLES */
./*site {
            background-color: var(--mid-grey);
        }*/

            /* The Modal (background) */
            .custom_modal {
              display: none; /* Hidden by default */
              position: fixed; /* Stay in place */
              z-index: 1; /* Sit on top */
              padding-top: 100px; /* Location of the box */
              left: 0;
              top: 0;
              width: 100%; /* Full width */
              height: 100%; /* Full height */
              overflow: auto; /* Enable scroll if needed */
              background-color: rgb(0,0,0); /* Fallback color */
              background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            }

            /* Modal Content */
            .custom_modal-content {
              background-color: #fefefe;
              margin: auto;
              padding: 20px;
              border: 1px solid #888;
              width: 80%;
            }

            /* The Close Button */
            .custom_close {
              color: #aaaaaa;
              float: right;
              font-size: 28px;
              font-weight: bold;
            }

            .custom_close:hover,
            .custom_close:focus {
              color: #000;
              text-decoration: none;
              cursor: pointer;
            }
.ozee {
   
    display: block;
}
/* //////////////////////////////////////////////////////// */
.boxed-layout,
.frame-layout {
	background-color: var(--mid-grey);
}

#recordings {
   margin: 0 auto;
   max-width: 80%;
   color: var(--light-grey);
}

.recordings-container{
   margin: 1rem; 
   display: flex;
   flex-direction: column;
}

.single-recording{
   display: flex;
   flex-direction: column;
   margin: 1rem;
   padding: 1rem;
   min-width: 550px;
   background-color: var(--dark-grey);
   border-radius: 10px;
   box-shadow: 2px 4px 6px black ;


}

.single-recording ul {
   display: flex;
   justify-content: space-around;
   list-style-type: none;
}

.single-recording li {
   margin: 0.3rem;
}

.audio-player {
   /* display: block; */
   width: 100%;
}

.note {
   margin-top: 0.3rem;
   background-color: white;
   color: var(--dark-grey);
   border: #aaa 1px solid;
   border-radius: 5px;
   padding: 0.8rem;
   box-shadow: 1px 1px 4px grey ;

}

.call-info {
   display: block;
}

.call-info ul {
   margin: 0;
   padding: 0.3rem;
}
.call-info ul li {
   padding: 0.3rem;
}


.tag-01 {
    /*background-color: royalblue;*/
    color: white;
    border-radius: 15px;
}

.tag-02 {
   background-color: crimson;
   color: white;
   border-radius: 15px;
}

.tag-03 {
   background-color: gold;
   color: var(--dark-grey);
   border-radius: 15px;
}

.call-details {
   display: flex;
   justify-content: space-evenly;
   flex-wrap: wrap;
   border-top: #000 1px solid;
}

.contact {
  font-size: large;
}

.name-from {
  font-weight: 700;
}

.call-edit {
   display: flex;
   margin-top: 0.8rem;
   justify-content: center;
}

.call-edit button{
   background-color: var(--very-dark);
   border: none;
   padding: 0.5rem;
   margin: 0.3rem;
   font-size: 1rem;
   border-radius: 0;
   line-height: 1rem;
}