/* Move down content because we have a fixed navbar that is 50px tall
  padding-top: 50px;
  padding-bottom: 20px;
}
*/

body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

.navbar{
	margin-bottom: 0px;
	border-radius:0px;
}

#embedCode{
	font-size:10px;
}

#embedCode-v2-html{
	font-size:10px;
}

#embedCode-v2-js{
	font-size:10px;
}

.embedCode-v2-load{
	font-size:10px;
}

#team{
	padding: 60px 0px;
}

#features {
    padding: 0px 0px;
}

#signup {
    padding: 60px 0px;
}

h1, h2, h3, h4, h5, h6{
	font-weight: 700;
}

#features_left .row {
	margin-bottom:100px;
}

.icon-bar{
	background-color:#563d7c;
}

#header{
	background-color:#eee;
	width:100%;
}
#reqHeader-data,
#respHeader-data,
#reqBody-data,
#respBody-data{
    background-color: #f8f9fa;
}
html[data-bs-theme="dark"] .navbar .navbar-brand img{
    filter: invert(1) hue-rotate(180deg) saturate(3);
}
html[data-bs-theme="dark"] #header{
    background-color: #212529;
    border-bottom: 1px solid #808080;
}
html[data-bs-theme="dark"] .navbar-nav .nav-item .link{
    color: #6ea8fe;
}
html[data-bs-theme="dark"] i.fas.fa-moon.theme-icon-active,
html[data-bs-theme="dark"] .navbar-nav .nav-item .nav-link{
    color: #fff !important;
}
html[data-bs-theme="dark"] .card-header{
    background-color: transparent !important;
}
html[data-bs-theme="dark"] .card-title{
    color: white;
}
html[data-bs-theme="dark"] #reqHeader-data,
html[data-bs-theme="dark"] #respHeader-data,
html[data-bs-theme="dark"] #reqBody-data,
html[data-bs-theme="dark"] #respBody-data,
html[data-bs-theme="dark"] .modal-dialog-scrollable,
html[data-bs-theme="dark"] pre code,
html[data-bs-theme="dark"] .multiselect-dropdown {
    background-color: transparent !important;
}
html[data-bs-theme="dark"] .multiselect-dropdown span.optext {
    border: 1px solid #eee;
    background-color: transparent;
}
html[data-bs-theme="dark"] .multiselect-dropdown-list div:hover {
    background-color: #ced4da1c;
}
html[data-bs-theme="dark"] .multiselect-dropdown-list-wrapper{
    background: #212529;
}
html[data-bs-theme="dark"] .pipeFileInput{
    background: -webkit-linear-gradient(top, #f9f9f900, #e3e3e382);
}
html[data-bs-theme="dark"] .storage-item{
    color: darkgrey !important
}
.blue {
    color: #1fbad6;
}
.documentation p{
	font-size: 16px;
	line-height: 1.6;
}

.documentation h3 {
    margin-top: 30px;
}

.documentation h2 {
    margin-top: 50px;
}

.documentation hr {
    margin-top: 0px;
}

.documentation img {
	margin-bottom:10px
}

.home_page_feature_image{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-banner{
    background-color: #5CB85C;
    color: white;
    padding: 15px 0px;
    text-align: center;
    border: 1px solid #4cae4c;
    border-right: none;
    border-left: none;
}
.wp-banner:hover{
    background-color: #449d44;
    border: 1px solid #449d44;

}
.nounderline:hover{
    text-decoration: none;
}
.table>thead>tr>th{
    border-top:0px solid #ddd;
}

.navbar-brand{
    padding: 5px 15px;
}

.label-personaldata{
    color:#000;
    background-color:#dff0d8;
}

span.personal-data {
    cursor: pointer;
    color: #337ab7;
    background-color: #dff0d8;
}

span.personal-data:hover {
    color: #23527c;
    text-decoration: underline;
}

.personal-data{
	background-color:#dff0d8;
}

sup.beta-sup {
    font-size: 13px;
    line-height: 1;
    top: -0.5em;
}

span.beta-badge {
    background: #D9514D;
    color: #ffffff;
    padding: 3px 5px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
    display: inline-block;
}

pre code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}

audio {
    min-width: 100%;
}

/* Custom Style for Bootstrap 4.6.2 */
/* ===========
    Nav Tabs  
  ============ */
.nav-tabs .nav-link:hover{
    background-color: #eee;
}
.nav-tabs .nav-item.show .nav-link, 
.nav-tabs .nav-link.active {
    background-color: #fff;
}

/* ============== 
    Backgrounds 
  =============== */
.bg-grad {
    color: #ffffff !important;
    background: linear-gradient(150deg, #2ab9a5 0%, #97c74e 50%, #2ab9a5 100%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-size: 260% 100%;
    background-position: right bottom;
    border: 0;
    line-height: 1.92;
}

.fa-circle-info{
    color: #808080c9;
}

/* =============
        Card 
   ============ */
.card-custom{
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    border: 1px solid #f0f1f3;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 30px 30px; 
}
.card-custom:hover {
    border-color: transparent;
    -webkit-box-shadow: 0px 0px 40px rgba(83, 88, 93, 0.1);
    box-shadow: 0px 0px 40px rgba(83, 88, 93, 0.1);
}
span.price-label {
    color: #fff;
    background: #ffaa17;
    font-size: 16px;
    width: 100px;
    margin-bottom: 15px;
    display: block;
    -webkit-clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
    clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
    margin-left: 0px;
    position: absolute;
    top: 31px;
}

.hidden{
    display: none !important;
}

.multiselect-dropdown{
    width: 100% !important;
    height: auto;	
    min-height: 50px;
    font-size: 14px;
    line-height: 21px;
}
.multiselect-dropdown span.optext {
    margin: 30px 3px 5px auto !important;
    padding: 0.75em !important;
}
.multiselect-dropdown span.placeholder {
    margin-top: 30px;
    padding: 5px;
}
/* ==============
Custom style for Upgrade sections
================= */
.upgrade-info{
    width: 98%;
    max-width: 650px;
    border: 1px solid #e5e7eb;
    left: 50%;
    transform: translate(-50%, 50%);
    position: absolute;
    z-index: 1;
    background-color: #fff;
}
.text-salmon{
  color: #fa8072;
}
.font-weight-600{
  font-weight: 600;
}
.no-access{
    background-color: #eeee; 
    opacity: 0; 
    filter: blur(5px);
}

.pointer-events-none{
    pointer-events: none;
}
.hidden-important {
    display: none !important;
}
@media(max-width: 990px){
    #navbarSupportedContent .navbar-nav{
        align-items: center;
    }
    #submitLogoutForm .navbar-nav{
        flex-direction: column;
    }
    #submitLogoutForm{
        margin-top: 0px !important;
    }
    #submitLogoutForm .navbar-nav .nav-item a{
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    #submitLogoutForm .navbar-nav span{
        display: none;
    }
    .upgrade-info {
        width: 60%;
    }
}

@media(max-width: 760px){
    #codePreview,
    #custom-id,
    #pipeVrec-custom-id,
    #pipeRecordRTC-custom-id{
        width: 540px !important;
    }
}

@media(max-width: 580px){
    #myTabs, #myAccountTabs {
        display: flex !important;
        flex-direction: column;
        justify-content: center !important;
        align-items: center;
    }

    #myTabs .nav-item.ml-auto {
        margin-left: 0 !important;
    }

    #heightSection{
        width: 80%;
        flex-flow: column wrap;
        align-items: start; 
    }

    #codePreview,
    #custom-id,
    #pipeVrec-custom-id,
    #pipeRecordRTC-custom-id{
        width: 480px !important;
    }

    .btn-group.btn-actions{
        display: flex;
        flex-direction: column;
    }
}


@media(max-width: 500px){
    #codePreview,
    #custom-id,
    #pipeVrec-custom-id,
    #pipeRecordRTC-custom-id{
        width: 440px !important;
    }
}

@media(max-width: 400px){
    #codePreview,
    #custom-id,
    #pipeVrec-custom-id,
    #pipeRecordRTC-custom-id{
        width: 390px !important;
    }
}


@media(max-width: 360px){
    #codePreview,
    #custom-id,
    #pipeVrec-custom-id,
    #pipeRecordRTC-custom-id{
        width: 340px !important;
    }
}

/* Custom style for Bootstrap 5.3.3 */
.navbar-toggler:focus {
    box-shadow: none;
}
.nav-tabs .dropdown-menu {
    margin-top: -2px !important;
}
.table>:not(caption)>*>*{
    background-color: transparent;
}
.btn-close:focus {
    box-shadow: none; 
}
.dropdown-toggle{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border: 0;
}
.btn.dropdown-toggle:active,
.btn.dropdown-toggle:focus,
.btn.dropdown-toggle:visited,
.btn-check:checked+.btn, 
.btn.active, 
.btn.show, 
.btn:first-child:active, 
:not(.btn-check)+.btn:active{
    border: none;
}
button.btn.dropdown-toggle:hover,
.btn-check+.btn:hover{
    background-color: #eee !important;
}
.btn.dropdown-toggle.show{
    border-color: transparent;
    background: transparent;
}
#bgCol:focus ~ .input-group-addon + .label-color,
#menuCol:focus ~ .input-group-addon + .label-color, 
#normalCol:focus ~ .input-group-addon + .label-color, 
#overCol:focus ~ .input-group-addon + .label-color  {
    z-index: 5;
}
html[data-bs-theme="light"] .bg-custom{
    background-color: #fff;
}
html[data-bs-theme="dark"] .bg-custom{
    background-color: #212529;
}
html[data-bs-theme="dark"] .pipeRecordRTC {
    color: var(--bs-body-color);
    border: 1px solid #383838;
}
a{
    text-decoration: none !important;
}
.accordion-button:not(.collapsed){
    color: #000;
    background-color: #eee;
}
.accordion-button:not(.collapsed),
.accordion-button:focus{
    box-shadow: none;
}
.dropdown-item:active,
.dropdown-item.active {
    background-color: #eee;
    color: #000;
}
.content-distribution{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; 
}
.placeholder {
    background-color: #000;
}
.form-control,
.form-select {
    border-radius: 0.375rem !important;
}
@media(max-width: 1024px){
    .content-distribution{
        flex-direction: column;
        align-items: flex-start;
    }
}
.team-members-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

@media(max-width: 768px){
    .team-members-content{
        flex-direction: column;
    }
}
button.btn.btn-danger.btn-sm.text-white{
    background-color: #78c043;
    border: 1px solid #78c043;
    padding-bottom: 6px;
}
button.btn.btn-danger.btn-sm.text-white:hover{
    background-color: #78c043c4;
    color: #000 !important;
}
button.btn.btn-danger.btn-sm.text-white .text-white:hover{
    color: #000 !important;
}