:root {
    --main-color: #fff;
    --element-radius: 1em;
    --obs-background: #181819;
    --obs-button-background: #162458;
    --obs-button-border: #233166;
    --obs-button-hover-background: #581624;
    --obs-button-hover-border: #84162d;
    --obs-button-color: #fff;
  }
  
  @import "normalize.css";
  
  *:focus {outline:none !important}
  
  @font-face {
      font-family: AdventSansFont;
      src: url('../fonts/AdventSans-Logo.otf')  format('opentype');
    }
    
    section#lt-default .tlogo {
        font-family: AdventSansFont;
    }
  
  /*CLOCK*/
  body.browser-source.clock{
      margin:0;
      font: bold 6vw 'Roboto Condensed', sans-serif;
      color: var(--main-color);
      text-align:right;
  }
  
  #div-clock {
      padding: .2em .5em;
      background: rgba(0,0,0,.2);
      display: inline-block;
      line-height: 1;
      border-radius: var(--element-radius);
  }
  
  /*OBS*/
  .panel {
    cursor: default;
      background: var(--obs-background);
      color: var(--main-color);
      font:normal 14px -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
      max-width:100%;
      margin:0;
      padding: 8px;
    box-sizing: border-box;
      }
      
  .panel input#lower-thirds-name, .panel input#lower-thirds-function,.for-speaker, .panel input[type="text"],.panel textarea , .panel input,.panel select{
      box-sizing: border-box;
      padding:.75em;
      margin:0 0 1em;
      border:none;
      display:block;
      width:100%;
  }
      
  .panel button{
      background: var(--obs-button-background);
      border: 1px solid var(--obs-button-border);
      color: var(--obs-button-color);
      padding:.75em;
      margin:0 0 1em;
      text-align:center;
      width:100%;
      cursor: pointer;
  }
  
.lowerthird-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
  .lowerthird-buttons.import-tab-buttons{
      padding:0 10px;
  }
  .panel button:hover{
      background: var(--obs-button-hover-background);
      border-color: var(--obs-button-hover-border);
  }
  
  .panel .radio-position{float: right;text-align:center}
  
  .panel .radio-position input{
      width: 2em;
      height:2em;
      display:inline-block
  }
  
  .panel .radio-position input:checked{
      background:red
  }
      
  .panel ul#predefined {
      list-style: none;
      padding: 0;
  }
  
  .panel ul#predefined li .name, ul#predefined li .function {
      display: block;
      line-height: 100%;
  }	
  ul#predefined li .function {
      font-size: 12px;
      font-style: italic;
      color: #ffc800;
  }
  .panel ul#predefined li {
      padding: .5em 1em;
      border: 1px solid #555;
      margin: 0 0 .25em 0;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: 300ms;
  }
  .function-list .li-container {
    transition: 300ms;
}

.function-list:hover .li-container {
    transform: scale(1.06);
}
  .panel ul#predefined li.notif {
      float: none;
      margin: 0;
  }
  .panel ul#predefined li:hover {
      background: #610101;
  }
  .panel ul#predefined li.notif:hover {
      background-color: #484848;
  }
  /*.panel ul#predefined li .function:before{ content: "\00a0(";}
  .panel ul#predefined li .function:after{ content: ")";}*/
  
  
          body.browser-source.lower-thirds{
          margin:0 2em;
          position:relative;
          overflow:hidden;
          height: 100vh;
          }
          
          
          #lower-third, #lower-third.left, #lower-third.right,#display-music{
          position:absolute;
          display:inline-block;
          transition: all .5s;
          }
          
          
          #lower-third.left,#display-music{left:0}
          #lower-third.right{right:0}
          
          #lower-third .left-block, #lower-third .right-block{
          display:inline-block
          }
          
          
          #lower-third .left-block{
          /*border-right:1px solid #333;*/
          padding-right:.5em;
          margin-right:.5em;
          width: 1131px;
          height: 356px;
          }
          .ltype-bluegold #lower-third .left-block{
              /*border-right:1px solid #333;*/
              padding-right:0;
              margin-right:0;
              width: 1138px;
              height: 185px;
              }
          /*#lower-third .left-block img{
          height:7em
          }*/
          .-lower-third-title {
              position: absolute;
              top: 141px;
              left: 210px;
          }
      
          body.browser-source.lower-thirds #lower-third #name {
          font: bold 4vw 'Roboto Condensed', sans-serif;
          color: #4f0000;
          left: 0;
          top: 0;
          }
          
          body.browser-source.lower-thirds #lower-third #function {
          font: bold 2vw 'Roboto Condensed', sans-serif;
          color: #f7941d;
          line-height:1;
          top: 2.5em;
          }
  
  
  
  
  .ltype-bluegold .-lower-third-title {
      position: absolute;
      top: 42px;
      left: 270px;
  }
  body.browser-source.lower-thirds.ltype-bluegold #lower-third #name {
      font: bold 3.2vw 'Roboto Condensed', sans-serif;
      color: #f6f7f8;
      line-height: 100%;
      left: 0;
      top: 0;
  }
  body.browser-source.lower-thirds.ltype-bluegold #lower-third #function {
      font: bold 2vw 'Roboto Condensed', sans-serif;
      color: #0b2134;
      margin-top: 0px;
  }
  
  
  #lower-third.animateIn.left, #display-music.animateIn{
      left: 0;
      bottom: 20px;
  }
  
  #lower-third.animateOut.left, #display-music.animateOut{
      left: 0vw;
  }
  
  #lower-third.animateIn.right{
      right: 0;
  }
  
  #lower-third.animateOut.right{
      right: -100vw;
  }
  #lower-third{
      bottom: 20px;
  }
  textarea#rolling-name {
      width: 100%!important;
      display: block;
      height:70px;
  }
  div#importbox {
      padding-top: 40px;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000;
      text-align: center;
      z-index: 2;
  }
  textarea#importText {
      width: calc(100% - 20px);
      margin: 10px auto;
      display: block;
      height: calc(100% - 90px);
  }
  div#importbox button {
      float: none;
      margin: 0 1%;
  }
  div#ltype_ {
      width: 60%;
      float: left;
      margin-right: 0%;
      background: #ffc800;
      border: 1px solid #610101;
      cursor: default;
      color: #610101;
      padding: 2px;
      margin: 0 0 1em;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      height: 37px;
      padding: 4px;
      box-sizing: border-box;
      line-height: 100%;
  }
  span.closeme:before {
      content: '';
      display: block;
      width: 10px;
      height: 2px;
      transform: rotate(45deg);
      background: #960000;
      position: absolute;
      top: 10px;
  }
  span.closeme:after {
      content: '';
      display: block;
      width: 10px;
      height: 2px;
      transform: rotate(-45deg);
      background: #960000;
      position: absolute;
      top: 10px;
  }
  span.closeme {
      position: absolute;
      right: 0;
      top: 0px;
      height: 10px;
      display: block;
      width: 10px;
      padding: 5px;
      z-index: 1;
  }
  span.closeme:hover:before, span.closeme:hover:after {
      background-color: #e8e8e8;
  }
  span#edtchurch {
      font-size: 11px;
  }
  /*timer*/
  #the-timer input{
      width: 100%;
      box-sizing: border-box;
      height: 30px;
      font-size: 25px;
      text-align: center;
  }
  
  .timer- {
      text-align: center;
      font-size: 10px;
      margin-bottom: 15px;
  
  }
  div#tTime {
      display:none;
      font-size: 34px;
      text-align: center;
      color: #e8c100;
      background: #790000;
      margin-bottom: 10px;
      line-height: 130%;
  }
  button#edtchurch {
    margin-top: 10px;
}
  #startTime{
      display: none;
  }
  div#i-timer.time-end {
      display: none;
  }
  div#i-timer.time-start {
      display: block;
  }
  
  .panel button.onethird.full{
      display:block; width: 100%;
  }
  span.sclear {
      font-size: 11px;
      font-style: italic;
      font-weight: 100;
      margin-left: 5px;
      position: relative;
      top: -3px;
      cursor: pointer;
  }
  
  .s720p.ltype-bluegold div#lower-third {
      width: 840px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: bottom;
  }
  .s720p.ltype-bluegold .-lower-third-title {
      position: absolute;
      top: 88px;
      left: 210px;
  }
  body.s720p.browser-source.lower-thirds.ltype-bluegold #lower-third #function {
      font: bold 2.2vw 'Roboto Condensed', sans-serif;
      color: #0b2134;
      margin-top: 0px;
  }
  
  .s720p.ltype-bluegold div#lower-third {
      width: 840px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: bottom;
  }
  .s720p.ltype-bluegold .-lower-third-title {
      position: absolute;
      top: 88px;
      left: 210px;
  }
  body.s720p.browser-source.lower-thirds.ltype-bluegold #lower-third #function {
      font: bold 2.2vw 'Roboto Condensed', sans-serif;
      color: #0b2134;
      margin-top: 0px;
  }
  
  body.s720p.ltype-redorange div#lower-third {
      width: 840px;
      background-size: contain;
      background-position: bottom;
      background-repeat: no-repeat;
  }
  .-lower-third-title {
      position: absolute;
      top: 209px;
      left: 150px;
  }
  
  body.browser-source.lower-thirds.s720p.ltype-redorange #lower-third #name {
      font: bold 3.5vw 'Roboto Condensed', sans-serif;
      color: #4f0000;
      left: 0;
      top: 0;
  }
  body.browser-source.lower-thirds.s720p.ltype-redorange #lower-third #function {
      font: bold 2vw 'Roboto Condensed', sans-serif;
      color: #f7941d;
      line-height: 1;
      margin-top: 9px;
  }
  li.li-onethird {
    position: relative;
    list-style: none;
    text-align: center;
    line-height: 35px;
    margin: 0;
    background-color: #888;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 0;
    font-size: 11px;
    transition: 300ms;
}
.li-onethird:after {
    content: '';
    position: absolute;
    right: -.5px;
    height: 80%;
    top: 50%;
    width: 1px;
    background: #ffffffd6;
    transform: translate(-50%, -50%);
}
.li-onethird:last-child:after {
    display: none;
}
  .u-tab ul {
      margin-top: 0;
      width: 100%;
      padding: 0;
      margin: 0;
  }
.u-tab ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
    display: grid;
}
  .u-tab ul li:first-child {
      border-left: 0;
  }
  .u-tab ul li:last-child {
      border-right: 0;
  }
  .u-tab ul li:hover {
      background: #750000;
  }
  li.active {
      background: #de9000;
  }
  .static-panel-top>div {
      display: none;
  }
  .static-panel-top>div.d-view {
      display: block;
  }
  .forFB{
      cursor:pointer;
  }
  span#copynotif{
      display: none;
      font-size: 10px;
      margin-top: 9px;    
      color: #ffe000;
      padding: 3px 15px;
      background: #ff0000;
  }
  span#copynotif.disp{display: inline-block;}
  .nte {
      margin-top: -10px;
      font-size: 11px;
      font-style: italic;
  }
  a.browser_drag_item.obsLink {
      padding: 5px;
      border: 1px solid #333;
      color: #888;
      background: #222;
      border-radius: 3px;
      text-decoration: none;
      display: inline-block;
      margin-bottom: 5px;
      font-size: 12px;
  }
  div#browser-sources_ {
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #424242;
      background: #101010;
        box-sizing: border-box;
  }
  
  /*lowerthird webversion bg*/

  section#lt-default .m_box::before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-left: 5px solid #fff;
      border-right: 5px solid transparent;
      border-bottom: 0px solid #fff;
      position: absolute;
      top: 0;
      left: 130px;
  }
  section#lt-default .m_box:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 0px solid #fff;
      border-left: 5px solid #fff;
      border-right: 5px solid transparent;
      border-bottom: 7px solid transparent;
      position: absolute;
      bottom: 0;
      left: 130px;
  }
  section#lt-default .m_container {
      float: left;
  
      height: 130px;
  }
  section#lt-default .m-inner {
      width: 650px;
      height: 116px;
      margin-top: 7px;
      position: relative;
  }
  section#lt-default .m-inner:after {
      content: '';
      display: block;
      height: 0;
      border-top: 56px solid #fff;
      border-left: 15px solid #fff;
      border-right: 15px solid transparent;
      border-bottom: 60px solid transparent;
      position: absolute;
      right: -29px;
  }
  section#lt-default .m-innerbox {
      float: left;
      width: 45px;
      height: 116px;
  
  }
  section#lt-default .m-innerbox2 {
      width: 10px;
      height: 116px;
      float: left;
      background: var(--lt-text-color);
  }
  spansection#lt-default .m-innerboxes {
      float: left;
  }
  section#lt-default .m-content {
      float: left;
      padding-left: 25px;
      height: 116px;
      vertical-align: middle;
  }
  .m-name-inner{
      font-family: var(--name-font);
  }
.m-function-inner{
      font-family: var(--function-font);
  }

  
  /*default theme*/
  /*redorange*/
   section#lt-default .m_box {
      background:  var(--lt-main-color);
  }
   section#lt-default .m_box::before {
      
      border-left-color:  var(--lt-main-color-2);
      border-bottom-color:  var(--lt-main-color-2);
  
  }
   section#lt-default .m_box:after {
      border-top-color: var(--lt-main-color-2);
      border-left-color: var(--lt-main-color-2);
  }
  
  section#lt-default .m-inner {
      background: var(--lt-secondary-color);
  }
   section#lt-default .m-inner:after {
      border-top-color: var(--lt-secondary-color);
      border-left-color: var(--lt-secondary-color);
  }
   section#lt-default .m-innerbox {
      background: var(--lt-secondary-color-2);
  }
  
  

  .ltype-redorange section#lt-default .m-function-inner {
    color: #4f0000;
}
  /*bluegold*/
  .ltype-bluegold section#lt-default .m_box {
      background: #0b2134;
  }
  .ltype-bluegold section#lt-default .m_box::before {
      
      border-left-color: #05111d;
      border-bottom-color:  #05111d;
  
  }
  .ltype-bluegold section#lt-default .m_box:after {
      border-top-color: #05111d;
      border-left-color: #05111d;
  }
  
  .ltype-bluegold section#lt-default .m-inner {
      background: #ae822c;
  }
  .ltype-bluegold section#lt-default .m-inner:after {
      border-top-color: #ae822c;
      border-left-color: #ae822c;
  }
  .ltype-bluegold section#lt-default .m-innerbox {
      background: #8c661c;
  }
  
  
  .ltype-bluegold section#lt-default .m-function-inner {
      color: #0b2134;
  }

  
  select#ltype_ {
      padding: .75em;
      margin: 0 0 1em;
      box-sizing: border-box;
      border: 0;
  }
  .nte1{
      font-size: 10px;
      display: block;
      line-height: 100%;
  }
  input#brwsrsrc {
      padding: 5px;
      font-size: 11px;
      background: #d8d8d8;
  }
  a.aloc {
      color: #de9000;
  }
  a.browser_drag_item.obsLink:hover {
      color: #222;
      background: #888;
  }

  li.group-title {
    background: #007704;
        display: flex;
            align-items: center;
}
.panel ul#predefined li.group-title:hover {
    background-color: #004402;
}
.function-group {
    padding-left: 0;
    list-style: none;
    margin-bottom: 10px;
    border-bottom: 6px solid #dadada;
}

  /*new animations*/
section#lt-default .m_box {
    position: relative;
    float: left;
    width: 130px;
    height: 130px;
  
    display: table;
    vertical-align: middle;
    
}
#lower-third.firstdisplay{
    transition: all 0s!important;
    
}
#lower-third.animateOut.left.firstdisplay section#lt-default .m_box{
    animation:none;
    

}
  #lower-third.animateOut.left section#lt-default .m_box {
    transform: scale(0) rotate3d(3, 3, 0, 360deg);
    /* animation: hidebox .5s; */
    transition: transform 1s;
    transition-delay: 1s;
}
#lower-third.animateIn.left section#lt-default .m_box {
    /*transform: scale(1) rotate3d(1, 1, 1, 0deg);*/
    transform: scale(1) rotate3d(1, 1, 1, 0deg);
    transition: transform .5s;
}

#lower-third.animateOut.left section#lt-default .m_container {
    width: 0px;
    overflow: hidden;
    transition: width 1s;
    opacity: 1;
}
#lower-third.animateIn.left section#lt-default .m_container {
    width: 700px;
    overflow: hidden;
    transition: width 1s;
    opacity: 1;
    transition-delay: .5s;
}

section#lt-default .tlogo::after {
    content: '';
    width: 5px;
    height: 116px;
    display: block;
    position: absolute;
    right: -5px;
    top: 7px;
    
}
section#lt-default .tlogo::after{
    background: #270000;
}
.ltype-bluegold section#lt-default .tlogo::after{
    background: #001323;
}

.closed{
    display: none;
}
button.setting-icon {
    background: transparent;
    border: 0;
    width: auto;
    height: auto;
    padding: 0;
    display: flex;
    margin: 0 7.5px 0 7.5px;
    cursor: pointer;
}
button.setting-icon:hover{
    background-color: transparent;
}
button.setting-icon:hover svg{
    fill: #888!important;
}
.u-tab {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    position: fixed;
    left: 0;
    padding: 0;
    box-sizing: border-box;
    top: 0;
    background: var(--obs-background);
    z-index: 8;
}
.static-panel-top {
    padding-top: 40px;
}
.f-selected {
    background: #444;
}
.li-hidden {
    height: 0;
    /* width: 0; */
    transition: 300ms;
    transform: scale(0);
    /* display: none; */
    overflow: hidden;
    border-width: 0!important;
    padding: 0!important;
    margin-bottom: 0!important;
}
.setting-modal {
    padding:10px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
    background: var(--obs-background);
    overflow: auto;
}

.selections {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
button.themebutton {
    background: transparent;
    border: none;
    width: 80px;
    font-size: 11px;
    cursor: pointer;
}
button#reset {
    width: 100%;
    color: #d50000;
    font-style: italic;
}
span#theme_ {
    font-size: 11px;
    font-weight: 400;
    display: block;
    margin-left: 10px;
    font-style: italic;
}

.tab-headings h3 {
    margin-bottom: 0; margin-top: 0;
}
.tab-headings {
    padding: 10px 5px;
    background: #007704;
    border: 1px solid #555;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.tab-headings:hover {
    background-color: #004402;
}
.section-container {
    margin-bottom: 15px;
}

.section-content {
    padding: 7px;
    background: #313131;
    display: none;    
    border-bottom: 6px solid #dadada;
    margin-bottom: 10px;
}
.section-show{
    display: block;
}
button.onehalf {
    width: 48%;
    float: left;
    margin-right: 2%;
}
input#autoChangeTheme {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    margin-right: 10px;
}

.tooltip {
    position: relative;
    cursor: default;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120%;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
    border: 1px solid #fff;
    font-size: 12px;
    padding: 5px;
}
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  span.t-template {
    cursor: default;
    display: block;
    background: #ffffff;
    color: #181819;
    text-align: center;
    padding: 3px;
}
span.t-theme {
    cursor: default;
    display: block;
    background: #181819;
    padding: 3px;
    color: #fff;
    border: 1px solid;
    text-align: center;
}

input#autoHideLowerthird {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    margin-right: 10px;
}


input[type="submit"] {
    cursor: pointer;
}

form#uploadForm {
    border: 1px solid #888;
    padding: 20px;
    background: #2d2d2d;
    display: flex;
}
form#uploadForm.hide{
    display:none;
}

body {
    background: #fff6;
}

input#fbStar {
    width: 30px;
    padding: 0;
    color: transparent;
    background: transparent;
    display: inline-block;
    margin: 0!important;
}
input#fbStar::selection {
    background: transparent;
    color: transparent;
}




.background h4.tooltip {
    float: left;
}
.background h4.tooltip span.tooltiptext {
    width: 200px;
    margin-left: -30px;
}

div#fontPreview {
    font-size: 30px;
    padding: 20px;
    background: #3d3d3d;
    border: 1px solid #000;
    margin: 0 auto 20px;
    line-height: 1.2em;
}
.timeout-container input#lowerthird-timeout {
    margin-bottom: 0;
}

.timeout-container {
    display: flex;
    width: 110px;
    align-items: center;
    margin-bottom: 1em;
    gap: 5px;
}

.login-window {
    padding: 30px;
    background: #292929;
    box-sizing: border-box;
    border: 1px solid #1e1e1e;
    border-radius: 20px;
	box-shadow: 0px 0px 11px 1px #8d8d8dbf;
    -webkit-box-shadow: 0px 0px 11px 1px rgb(141 141 141 / 75%);
    -moz-box-shadow: 0px 0px 11px 1px rgba(141 141 141, 0.75);
}
.login-window form {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
body.lower-thirds-panel.panel.login-panel {
    padding: 20px;
}

.panel button.display-all-btn {
    background: transparent;
    border: 0;
    flex-shrink: 1;
    flex-grow: 0;
    width: auto;
    padding: 5px;
    margin: 0
}
li.group-title span {
    flex-grow: 1;
    flex-shrink: 0;
}