:host(otc-inquiry){
  display: none;
  border: none;
  height: 100%;
  animation-duration: 0.4s !important;
}
#manipulate article{
  height: max-content;
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(100px, max-content) 185px;
  grid-auto-columns: 185px;
  grid-gap: 1px;
}
#manipulate section:first-child{
  /* background: #333; */
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 35px;
  color: #EEE;
  padding-top: 95px;
}
#manipulate section:first-child > *{
  background: #455A64;
  text-align: right;
  padding: 9px;
  padding-top: 2px;
}
#manipulate section:first-child elementdescription{
  display: block;
}
#manipulate section:first-child quotetype{
  font-size: 0.8em;
  color: #AAA;
}
.otc-response-form section{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-gap: 5px;
}
.otc-response-form input{
  width: 100%;
}
#manipulate button{
  display:block;
  height: 20px;
  width: 200px;
  border: 1px solid red;
}
:host{
/*   border: 3px solid green; */
}
::slotted(inquiry-response){
  display: block;
  /* background: red; */
}
#manipulate button{
  border: 1px solid red;
}
#manipulate button[name="ask"]:before{
  display: block;
  content: 'Sell';
}
  counterparty{
    background: #333;
    display: block;
  }
:host-context(li:hover) light{
  color: #EEE;
}
:host-context(.selected) light[dirty],
light{
  display: block;
  background: #396e97;
  text-align: center;
  border-radius: 20px;
  min-width: 18px;
  height: 11px;
  border: 1px solid #2196F3;
  line-height: 12px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px;
  margin-right: 2px;
  font-size: 1em;
  color: #CCC;
}

light[all-responded]{
  background: #555;
  border: 1px solid #888;
  color: #CCC;
  opacity: 0.5;
}
light[dirty]{
  background: #449747;
  border: 1px solid #0F0;
  opacity: 1;
  color: #FFF !important;
  animation: glow 2s infinite;
}

light[text]:after{
  content: attr(text);
}
light#complete{
  border: none;
  background: none;
}
light#complete:after{
  content: '\2714';
  color: #4CAF50;
}
light#new:after{
  content: '\2733';
  color: #FFF;
}
/** Growl **/
otc-growl{
	position: absolute;
	top: 0;
	background: transparent;
	padding: 16px;
	z-index: 1;
	width: auto;
	box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.75);
	width: calc(100% - 32px);
	font-weight: bold;
	cursor: pointer;
	animation-duration: 0.5s !important;
}
otc-growl[type]:before{
  display: inline-block;
  font-family: 'otc-tool';
  font-size: 30px;
  content: ']';
  color: #FFF;
  vertical-align: middle;
  margin-right: 15px;
}
otc-growl[type="error"]{
  background-image: linear-gradient(rgb(244, 67, 54), rgba(255, 87, 34, 0.9));
  border-bottom: 1px solid red;
}
otc-growl[type="error"]:before{
  content: '1';
}
otc-growl[type="success"]{
  background-image: linear-gradient(rgb(190, 226, 148) 0%, rgb(145, 199, 83) 40%,rgb(139, 195, 74) 40%, rgba(76, 175, 80, 0.9294117647058824) 60%);
  border-bottom: 1px solid #8BC34A;
}
otc-growl[type="success"]:before{
  content: '-';
}
otc-growl[type="info"]{
  background-image: linear-gradient(rgba(33, 150, 243, 1), rgba(0, 188, 212, 0.9));
  border-bottom: 1px solid #673AB7;
}
otc-growl icon{
  display: inline-block;
  vertical-align: middle;
  padding-right: 20px;
  width: 40px;
}
otc-growl message{
  display: inline-flex;
  width: calc(100% - 85px);
  vertical-align: text-top;
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  padding-left: 20px;
  min-height: 40px;
  vertical-align: middle;
  /* align-self: center; */
  /* align-content: center; */
  align-items: center;
  text-shadow: 1px 1px #FFF7;
  color: #000D;
}

otc-growl icon:before{
  display: block;
  font-size: 40px;
}
otc-growl[type="error"] message{
  border-left: 1px solid #000;
}
otc-growl[type="error"] icon:before{
  content: "\31";
}
otc-growl[type="info"] icon:before{
  content: "\5d";
  color: #FFF;
}
otc-growl[type="success"] icon:before{
  content: "\2d";
  color: #dff6c5;
} 

/**
 * Settings View 
 */

 :host(otc-settings),
 otc-settings{
   overflow: hidden;
   width: 100%;
   height: 100%;
   max-height: 100%;
   position: absolute;
   bottom: 0;
   display: flex;
   z-index: 10;
   flex-basis: auto;
}
section#settings {
  flex: 1 100%;
  position: absolute;
  /* max-width: 100%; */
  margin-top: 20px;
  margin-left: 25px;
  margin-right: 30px;
  right: 0;
  max-height: calc(100% - 50px);
  left: 0;
  bottom: 0;
  top: 0;
}
otc-settings *{
  box-sizing: border-box;
  color: #CCC;
}
otc-settings h2{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-flow: row nowrap;
}
otc-settings h2 .otc-title{
  width: 100%;
  font-size: 20px;
  padding-bottom: 4px;
}
otc-settings h2.otc-trader {
  font-size: 16px;
  white-space: nowrap;
  padding: 0px 10px;
  display: block;
  justify-self: end;
}
otc-settings h2 .otc-trader:before{
  content: 'Trader: ';
}
otc-settings form#trader-settings{
  display: flex;
  padding: 0;
  background: #2b383f;
  top: 0;
  border-bottom: 1px solid #555;
  color: #CCC;
  align-items: stretch;
  width: calc(100% + 55px);
  position: relative;
  left: -25px;
  top: -21px;
  padding-top: 11px;
  /* height: 100%; */
}

otc-settings form#trader-settings h3 {
  position: relative;
  margin-left: 10px;
  /* max-width: 80%   */
}
otc-settings form#trader-settings hr {
  border: 0.5px solid #4e646e;
}
otc-settings form#trader-settings .settings_inputs {
  flex: 1 100%;
}
otc-settings form#trader-settings legend {
  margin: 8px 4px 8px 4px;
}
otc-settings form#trader-settings #personal_information_wrapper,
otc-settings form#trader-settings #preferences_wrapper,
otc-settings form#trader-settings #configuration_wrapper
{
  margin-bottom: 50px;
  padding: 0px 10px;
} 
otc-settings form#trader-settings .settings_checkboxes, 
otc-settings form#trader-settings .settings_checkboxes label, {
  flex: 1 100%;
  cursor: pointer;
}
otc-settings form#trader-settings button[type="cancel"] {
  background: linear-gradient(#ff5722, rgba(244, 67, 54, 0.8));
}

/**
 * Forgot Password View 
 */

#forgot-password forgot-password {
  width: 100vw;
  height: 100vh;
  position: absolute;
  /* background: #37474F; */
  top: 0;
  left: 0;
  z-index: 1;
  /* display: none; */
}
#forgot-password forgot-password form{
  background: linear-gradient(#455A64, #607D8B);
  display: flex;
  max-width: 200px;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 100px;
  padding: 50px;
  animation: fadeInDown 0.5s ease-out 0s 1 normal;
  box-shadow: 0px 2px 50px rgba(0,0,0,0.5);
  position: relative;
  border: 1px solid #607D8B;
}
  #forgot-password forgot-password form[error*=" "]:before{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    content: attr(error); 
    display: block;
    width: calc(100% - 20px);
    animation: fadeInDown 0.8s cubic-bezier(0, 0, 0, 1.00) 0s 1 normal;
    height: auto;
    background: #F44336;
    color: #FFF;
  }
#forgot-password forgot-password form *{
  margin-bottom: 10px;
  border: none;
  padding: 5px 5px;
  border-bottom: 1px solid #78909C;
  background: none;
  color:  #FFF;
  position: relative;
  z-index: 10;
}

section#forgot-password forgot-password form input::placeholder{
  color: #B0BEC5;
}
section#forgot-password forgot-password form button[type="submit"]:hover {
  background: #4CAF50;
}
section#forgot-password forgot-password form button[type="submit"]{
  cursor: pointer;
  background: #43A047;
  color: #CFD8DC;
}

/**
 * Reset Password View 
 */

 #reset-password reset-password {
  width: 100vw;
  height: 100vh;
  position: absolute;
  /* background: #37474F; */
  top: 0;
  left: 0;
  z-index: 1;
  /* display: none; */
}
#reset-password reset-password form{
  background: linear-gradient(#455A64, #607D8B);
  display: flex;
  max-width: 200px;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 100px;
  padding: 50px;
  animation: fadeInDown 0.5s ease-out 0s 1 normal;
  box-shadow: 0px 2px 50px rgba(0,0,0,0.5);
  position: relative;
  border: 1px solid #607D8B;
}
  #reset-password reset-password form[error*=" "]:before{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    content: attr(error); 
    display: block;
    width: calc(100% - 20px);
    animation: fadeInDown 0.8s cubic-bezier(0, 0, 0, 1.00) 0s 1 normal;
    height: auto;
    background: #F44336;
    color: #FFF;
  }
#reset-password reset-password form *{
  margin-bottom: 10px;
  border: none;
  padding: 5px 5px;
  border-bottom: 1px solid #78909C;
  background: none;
  color:  #FFF;
  position: relative;
  z-index: 10;
}

section#reset-password reset-password form input::placeholder{
  color: #B0BEC5;
}
section#reset-password reset-password form button[type="submit"]:hover {
  background: #4CAF50;
}
section#reset-password reset-password form button[type="submit"]{
  cursor: pointer;
  background: #43A047;
  color: #CFD8DC;
}
section#reset-password reset-password form button[type="cancel"]{
  cursor: pointer;
  background: #B71C1C;
  color: #CFD8DC;
}

:host(modal-overlay),
modal-overlay {
  overflow: hidden;
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: linear-gradient(#4e646e, #36484f);
  box-shadow: 0px 0px 20px #000;
  border-radius: 10px;
  border: 1px solid #4e646e;
  width: calc(100vw / 1.5);
  height: calc(85vw / 2.25);
}
section#modal {
  display: flex;
  flex-direction: column;
  height: 100%;
}
section#modal > * {
  color: white;
}
#modal_header {
  flex-grow: 1;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid grey;
  background-color: #617a85;
  max-height: 75px;
  padding: 10px 12px;
}
#modal_header b {
  font-size: 20px;
}
#modal_header p {
  font-size: 14px;
}
#modal_body {
  flex-grow: 10;
  padding: 10px 12px;
}
#modal_footer {
  align-self: flex-end;
  width: 100%;
  border-radius: 0 0 4px 4px;
}
#modal_footer button:first-of-type {
  background: linear-gradient(#ff5722, rgba(244, 67, 54, 0.8));
  border-radius: 0 0 0 9px;
}
#modal_footer button:last-of-type {
  background: linear-gradient(#689F38, #558B2F);
  border-radius:  0 0 9px 0;
}

/**
 * OTC CLIP
 */
:host(otc-clip){
	display:block;
	animation-delay: 0s;
	animation-duration: 0.4s !important;
	padding: 5px;
	background: #90A4AE;
	position: relative;
	z-index: 5;
}
:host(otc-clip:nth-child(odd)){
  background: #a9bac2;
}
:host(otc-clip.behind){
  z-index: 1;
}

.otc-clip{
  display:grid;
  grid-template-columns: 110px minmax(20px, 160px) 85px 60px;
  margin:  0;
}
.otc-clip input[type="text"]{
  grid-row: 1;
  padding: 2px;
}
.otc-clip label[for="isincremental"]{
  grid-row: 2;
  grid-column: 3 / 5;
  margin-left: 20px;
  white-space: nowrap;
}
.otc-clip input[id="isincremental"]{
  grid-row: 2;
  grid-column: 3;
  justify-self: left;
}
.otc-clip button{
  border: none;
  width: 100%;
  grid-row:3;
  grid-column: 1 / 5;
  margin: 5px 0px;;
  background: linear-gradient(rgba(244, 67, 54, 0.6), rgba(255, 87, 34, 0.7));
  color: #EEE;
  cursor: pointer;
}
.otc-clip select{
  grid-row: 2;
  grid-column: 1 / 3;
}
.otc-clip button:hover{
  background: linear-gradient(#F44336, #FF5722);
}


/* OTC List */
  otc-list{
    display: block;
    height: 100%;
  }
 .otc-list-content{
    overflow-y: auto;
    height: calc(100% - 50px);
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    padding-right: 0;
  }
    .otc-list-content input{
      display: none;
    }

    .otc-list-content li{
      background: #4e646e;
      display: flex;
      padding: 5px;
      cursor: pointer;
      color: #EEE;
      list-style: none;
      max-width: 100%;
      height: 28px;
      flex-direction: column;
      flex-flow: nowrap;
      align-content: center;
      border-bottom: 1px solid #2b383e;
      animation: itemSlide 0.5s cubic-bezier(0, 0, 0.01, 1.03) 0s 1 normal;
      justify-content: stretch;
      position: relative;
      padding-right: 0px;
    }
        .otc-list-content li[responses][current-state="send"]{
          opacity: 1;
        }
    
    .otc-list-content li:nth-of-type(odd){
      opacity: 0.85;
    }
    .otc-list-content li[selected],
    .otc-list-content li:hover{
      filter: brightness(1.4);
    }
    .otc-list-content li[selected]:after{
      display: block;
      content: '';
      width: 20px;
      height: 20px;
      background: #1b2428;
      position: absolute;
      right: -10px;
      top: 10px;
      transform: rotate(45deg);
      z-index: 100;
    }

      .otc-list-content li span{
        display: none;
        white-space: nowrap;
        /* max-width: 100px; */
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 28px;
        width: 70px;
      }
      .otc-list-content li [key=Title]{
        width: 75%;
      }
      .otc-list-content li [key=LastUpdateTime],
      .otc-list-content li [key=Title]{
        display: inline;
      }
      .otc-list-content li .createtime{
        text-align: right;
        font-size: 0.8em;
        line-height: 18px;
      }
      .otc-list-content li otc-status{
        display: block;
      }
    .otc-list-content li:before{
      font-family: 'otc-tool';
      content: " ";
      padding: 6px 8px;
      padding-right: 0;
      font-weight: lighter;
      font-size: 16px;
      margin-right: 5px;
      min-width: 24px;
    }

    .otc-list-content li.show{
/*       transform: translateX(0%); */
    }
    .otc-list-content li[state="executing"],
    .otc-list-content li[state="executed"]{
      background-color: #2f7431;
      border-bottom: 1px solid #225b22;
      color: #dfdfdf;
    }
    .otc-list-content li[state="executing"]{
      animation: bounce 2s infinite;
    }
    .otc-list-content li[state="executing"][selected]{
      animation: none;
    }
    .otc-list-content li[state="executing"]:before{
      content: 'e';
      animation: glowWhiteText 1s ease-in-out infinite;

    }
    .otc-list-content li[current-state="execute"]:hover,
    .otc-list-content input:checked + li[current-state="execute"]{
      background-color: #43A047;
      border-bottom: 1px solid #225b22;
      color: #dfdfdf;
    }
    .otc-list-content li[state="responded"]{
       background-color: #145faa;
      border-bottom: 1px solid #1565C0;
      color: #dfdfdf;
    }

    .otc-list-content li[state="refresh"]{
      background-color: #D32F2F;
      border-bottom: 1px solid #fc1b0a;
      color: #dfdfdf;
     animation: bounce 2s infinite;
    }
    .otc-list-content li[state="refresh"][selected]{
      animation: none;
    }
      
    .otc-list-content li[state="execute"]{
/*       background-color: #409b43;
      border-bottom: 1px solid #357b35; */
      color: #dfdfdf;
    }

    .otc-list-content li[state="send"]{
/*       background-color: #409b43;
      border-bottom: 1px solid #357b35; */
/*       color: #dfdfdf; */
    }

    .otc-list-content li[dirty]{
      animation: bounce 2s infinite;
    }
    .otc-list-content li[current-state="execute"]:before{
        content: "0";
    }
    .otc-list-content li[state="responded"]:before{
      content: "0";
    }
    .otc-list-content li[state="refresh"]:before{
      content: '1';
    }
    .otc-list-content li[state="addcounterparty"]:before,
    .otc-list-content li[state="send"]:before{
      content: "6";
    }
    .otc-list-content li[state="nudge"]:before{
       content: "s";
    }
    .otc-list-content li[state="create"]:before{
      content: "6";
    }
    .otc-list-content li[state="executed"]:before{
     content: '-';
    }
    .otc-list-content li[state="close"]:before{
     content: '-';
    }
    .otc-list-content li[state="close"]{
      filter: grayscale(1);
    }
/** OTC Details **/
otc-tab{
  display: inline-block;
  height: 100%;
  /* flex-basis: 12%; */
  min-width: 20px;
  flex-grow: 1;
  width: 50px;
  margin-right: 0px;
}
otc-tab[current]{
  min-width: 100px;
  /* position: initial; */
}
otc-tab[current] label{
/*   padding-top: 8px;
  height: calc(100% - 18px); */
}
otc-tab[current] label:before{
  font-family: 'otc-tool';
  border-radius: 20px;
  background: #66BB6A;
  padding: 4px;
  display: inline-block;
  content: 'e';
  vertical-align: middle;
  color: #3a463b;
  font-size: 15px;
  margin-right: 8px;
  margin-top: -2px;
  border: 2px solid rgb(133, 238, 12);
  animation: borderglow 2s ease-out infinite;
  
}
otc-tab[current] > label [timeago]{
  left: 38px;
}
otc-tab[current] > content > section:before{
  background: linear-gradient(45deg, #4CAF50 0%, rgba(36, 162, 41, 1) 50%);
  /* border: 1px solid #09da12; */
  width: max-content;
  border-left: none;
  border-right: none;
  content: 'Active Quote';
  display: inline-block;
  padding: 5px 10px 10px;
  margin-bottom: 25px;
  text-shadow: 1px 1px #07dd10;
  border-radius: 10px;
  margin-right: 10px;
}
otc-tab[strike]{
  width: 20px;
}
otc-tab[strike] content:before{
  display: block;
  content: '[VOID]';
  font-size: 100pt;
  color: rgba(244, 67, 54, 0.17);
  position: absolute;
  top: 20%;
  left: 50%;
  z-index: 1;
  transform: rotate(-25deg) translateX(-50%) translateY(-30%);


}
otc-tab[strike] > label{
  text-decoration: line-through;
  padding: 10px 5px;
  width: 100%;
  max-width: calc(100% - 12px);
}
otc-tab[strike] content controls{
  display: none;
}
otc-tab > content{
  display: none;
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
  /* border: 1px solid red; */
  height: calc(100% + 40px);
}
otc-tab > label{
  display: inline-block;
  background: #78909C;
  padding: 10px 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  width: calc(100% - 10px);
  white-space: nowrap;
  height: calc(100% - 20px);
  cursor: pointer;
  max-width: calc(100% - 21px);
  margin: 0;
  position: relative;
}
otc-tab > input{
  display: none;
}
otc-tab > input:checked ~ content{
  display: block;
  background: linear-gradient(#CFD8DC 75px, #b3bbbe 75px);
  height: calc(100% - 50px);
}
otc-tab > input:checked ~ content{
}

otc-tab > label:hover{
  background: #90A4AE;
}
otc-tab > label{

}

otc-tab > label [timeago]{
  transition: opacity 0.5s ease-in;
  margin-left: 5px;
  font-size: 0.7em;
  font-weight: bold;
  position: absolute;
  left: 0px;
  color:#37474F;
  top: 2px;
  /* transform: translateX(-100%); */
  max-width: calc(100% - 7px);
  overflow: hidden;
  text-overflow: ellipsis;
}

otc-tab > input:checked ~ label{
  background: #CFD8DC;
  /* position: absolute; */
  /* height: 30px; */
  /* z-index: 10; */
}
otc-tab > input:checked ~ label [timeago]{
  opacity: 0;
}

:host(otc-details),
otc-details{
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  max-width: 100%;
  /* margin-top: 40px; */
  max-height: calc(100% - 50px);
}
otc-details *{
  box-sizing: border-box;
  /* color: #CCC; */
}

otc-details fieldset[name=chat]{
  position: relative;
  max-width: 645px;
  margin: 0 auto;
  margin-top: 20px;
  width: 645px;
  flex-basis: 30%;
  overflow: hidden;
  min-height: 110px;
}
otc-details .otc-description{
  font-size: 12px;
  font-family: arial;
  max-width: 40vw;
  overflow: hidden;
  white-space: pre-wrap;
  min-width: 0px;
}
otc-details h2{
  display: flex;
  /* justify-content: space-between; */
  flex-flow: row nowrap;
}
otc-details h2 .otc-title{
  width: 100%;
  font-size: 20px;
  padding-bottom: 4px;
  text-transform: uppercase;
}
otc-details h2 .otc-trader,
otc-details h2 .otc-lastactiontime{
  font-size: 16px;
  white-space: nowrap;
  padding: 0px 10px;
  display: block;
  justify-self: end;
  text-transform: uppercase;
}
otc-details h2 .otc-trader:before{
  content: 'Trader: ';

}
otc-details h2 .otc-lastactiontime:before{
  content: 'Last Action: ';
}
otc-details table{margin: 20px;width: 100%;margin: 0px auto;border-collapse: collapse;min-height: 100%;/* padding: 10px; */}

otc-details table tr{
  
}
otc-details table tr.incremental td,
otc-details table tr.incremental + tr[for] td
{
  background: #2b383e;
}
otc-details table tr td:first-of-type > span{
  display: inline-block;
  width: 100%;
  text-align: right;
  padding-left: 16%;
  padding-top: 11px;
}
otc-details table tr td:first-of-type:not([colspan]){
  width: 15%;
  padding-right: 1%;
}
otc-details table tr td,
otc-details table tr + tr[for] td{
  position: relative;
  background: #415259;
}
otc-details table tr td.mid{
  width: 15%;
  overflow: visible;
}
otc-details table tr.header td{
  font-size: 20px;
  color: #EEE;
  padding: 10px 0px;
}
otc-details table tr.header.incremental td{
  font-size: 12px;
  font-weight: bold;
  color: #abb8bc;
  /* padding: 0; */
  overflow: hidden;
  border: 1px solid #2c3a40;
  text-transform: uppercase;
  height: 50px;

}


otc-details table tr td:empty{
  height: 40px;
  margin: 5px;
  background: none;
}
otc-details table tr[for] td{
  margin: 0;
  transition: all 0.2s ease-in-out;
  padding: 0px;
  background: none;
}
otc-details table tr[for] td:after{

}
otc-details table tr[for] td:empty{
  height: 0; margin: 0; padding: 0;
}
otc-details table tr[for] td:first-of-type > span:empty{display: none;}
otc-details table tr[for] td:first-of-type > span{
  display: inline-block;
  background: #B71C1C;
  margin: 5px 5px;
  padding: 3px;
  border-radius: 5px;
  border: 1px solid #F44336;
  text-transform: uppercase;
  font-size: 10px;
  width: auto;
}
otc-details table tr.separate td{

  /*padding-top: 30px;*/
  /* border-top: 5px solid #000; */
}
otc-details .response-field::-webkit-input-placeholder{
  color: #838383;
}

otc-details .bidaskerror{
  border: 2px solid red; 
 }
otc-details input.response-field{
  width: 40%;
}
otc-details input.response-field.mid{
  width: 80%;
  margin-right: 5%;
  text-align: center !important;
  min-width: 70px;
}

otc-details .response-field{
  /* border: 2px solid red; */
  font-size: 12px;
  height: 24px;
  padding: 0px 0px 0px 5px;
  text-align: center;
  font-weight: bold;
  color: #5b5b5b;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
  margin-left: 0px;
  margin-top: 10px;
  border: none;
  min-width: 80px;
}
 otc-details .direction{
   border-left: 1px solid #CCC;
   background: #d1dade;
   color: #232f34;
   padding: 0;
 }
 otc-details .inError{
  border: 2px solid red;
}
.refresh otc-details .response-field{
  background: #AED581;
  animation: refreshFields 0.5s ease-in infinite alternate;
  border: none;
}
@keyframes refreshFields{
  from{
    background: #F1F8E9;
  }
  to{
    background: #AED581;
  }
}
otc-details form td select.execute_choice{
  display: none;
}
otc-details form[valid] .response-field,
otc-details .response-field[readonly]{
  background: none;
  border: none;
  color: #EEE;
  font-size: 20px;
  /* text-align: left; */
}
otc-details input.response-field[readonly]{
  display: inline-block;
  overflow: visible;
  min-width: 100px;
}
otc-details form[valid] .response-field.direction ,
otc-details .response-field[readonly].direction {
  font-size: 100%;
  pointer-events: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255,255,255,0.25);
  vertical-align: 2px;
}
otc-details .response-field[readonly].direction:after{
  display: none;
}
otc-details form[execute] td.execute{
  background: #618832;
  color: rgba(0,0,0,0.9);
  animation: executeField 1s ease-in-out infinite alternate;
}
otc-details form[execute] td.execute.denied:after,
otc-details form[execute] td.execute.accepted:after{
  display: block;
  padding: 2px 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  margin: 5px 20%;
}
otc-details form[execute] td.execute.denied:after{
  content: 'DENIED';
  background: #b61d11;
  border: 1px solid #F00;
  color: #EEE;
}
otc-details form[execute] td.execute.accepted:after{
  content: 'CONFIRMED';
  background: #388E3C;
  border: 1px solid #0F0;
  color: #fff;
}
otc-details form[execute]:not([execute="done"]) td.execute select.execute_choice{
  display: inline-block;
  width: auto;
  height: 19px;
  margin: 0 auto;
  padding: 0;
  top: 55px;
  position: absolute;
  left:  50%;
  transform: translateX(-50%);
}
otc-details form[execute] td.awaiting{
  padding-bottom: 30px;
  padding-top: 15px;
  white-space: nowrap;
}
otc-details form[execute] td.execute *{
  color: rgba(0,0,0,0.9);
}
otc-details form[execute] td.execute.ask{
  background: #c2433a;
}
@keyframes executeField{
  0% {
    filter: brightness(1.1);
  }
  100%{
    filter: brightness(0.8);
  }
}
otc-details .response-field ~ label{
  display: block;
  position: absolute;
  top: 5px;
  opacity: 0;
  font-size: 12px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  margin: 0px -10px;
  color: #6f7d82;
  animation: ascend 0.5s ease-out forwards;
  z-index: 0;
  transform: translateX(-50%);
  margin-bottom: 10px;
  left: 57%;
}
otc-details input.response-field[value] ~ label{
  color: #4CAF50;
  opacity: 1;
  animation: ascend 0.5s ease-out forwards;
  text-shadow: 1px 1px 0px #000, 2px 2px 0px #000;
}
otc-details input.response-field[value] ~ label:last-of-type{
  display: inline-block;
  left: 54%;
}
otc-details input.response-field[value][readonly] ~ label:last-of-type{
}
@keyframes ascend{
  0%{
    opacity: 0;
    transform: translate(-50%, 15px);
  }
  100%{
    opacity: 1;
    transform: translate(-50%, 0px);
  }
}
@keyframes descend{
  0%{
    opacity: 1;
    transform: translate(-50%, 0px);
  }
  100%{
    
    opacity: 0;
    transform: translate(-50%, 15px);
  }
}

otc-tabs{
  height: 40px;
  display: flex;
  max-width:  100%;
  overflow: hidden;
  width:  100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  /* overflow-x: auto; */
  margin-top: -40px;
}
otc-tab:last-child label{
  display: none;
}
otc-tabs otc-tab:last-child content{
  /* top: 0; */
  height: 100%;
}
otc-tab:last-child content fieldsets{
  height: calc(100vh - 120px);
}
otc-tab + otc-tab:last-child{
  min-width: 150px;
}
otc-tab:last-child label{
  display: inline-block;
  background: #4CAF50;
  text-shadow: 1px 1px rgba(255,255,255,0.5);
  color: #1B5E20;
  /* min-width: 105px; */
}
otc-tab:last-child label:before{
  display: inline-block;
  font-family: "otc-tool";
  content: '5';
  font-size: 20px;
  vertical-align: middle;
  margin-top: -2px;
  margin-right: 10px;
}
otc-tab + otc-tab:last-child content{
  top: 40px;
  /* height: calc(100% - 40px); */
}
otc-tab + otc-tab[confirm-exec] content:before{
  display: block;
  content: 'Executed. Please Confirm.';
  width: 100%;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: #4caf50;
  position: absolute;
  animation: glowWhiteText 1s ease-in-out infinite both;
  height: 53px;
  line-height: 50px;
}
otc-tab + otc-tab:last-child[refresh] content{
  background: linear-gradient(#CFD8DC 110px, #b3bbbe 110px);
}
otc-tab + otc-tab:last-child[refresh]:not([confirm-exec]) content:before{
  display: block;
  content: 'A refresh has been requested on your quote. Please re-confirm.';
  width: 100%;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: #F44336;
  animation: glowWhiteText 1s ease-in-out infinite both;
}
otc-tab + otc-tab:last-child[refresh] content fieldsets{
  height: calc(100vh - 160px);
}
otc-tab + otc-tab:last-child content fieldsets{
  height: calc(100vh - 120px);
  /* box-shadow: inset 0px 24px 20px 33px red; */
  position: relative;
  /* z-index: 1; */
}
otc-tab + otc-tab:last-child content controls{
  display: none;
}
  otc-tab content fieldset[name=lifetime-fieldset]{
    border: none;
    margin: 5px;
    margin-bottom: 45px;
    margin-top: 30px;
  }
  otc-tab content fieldset[name=lifetime-fieldset] select{
    padding: 10px;
  }
  otc-tab content fieldset[name=quoteInfo] legend{
    display: none;
  }
  otc-tab content fieldset[name=quoteInfo] p{
    margin-top: 4px;
  }
  otc-tab content > section.previous{
    display: block;
    padding: 20px 25px;
  }
  otc-tab time{
    font-size: 15px;
    font-weight: bold;
    margin: 5px 0px 40px;
    display: inline-block;
  }
  otc-tab time:before{
    content: "Sent ";
  }
  otc-tab time:after{
    content: " by " attr(by);
  }
  otc-tab description{
    display: block;
    padding: 18px 0px 12px 2px;
    margin-bottom: 13px;
  }
  otc-tab description:before{
    display: block;
    content: 'Quote request from ' attr(by);
    text-transform: uppercase;
    font-weight: bold;
    color: #455A64;
    margin-bottom: 5px;

  }
  otc-tab section.previous input{
    background: none;
    border: none;
    font-weight: bold;
  }
  otc-tab section.previous input[empty]{
    font-weight: normal;
  }
/** Animations */
@keyframes bounce{
  0% {
    transform: translateX(0);
  }
  60% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(5%);
  }
  90% {
    transform: translateX(0%);
  }
  95% {
    transform: translateX(1%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes blink{
  0% {
    background: #449747;
    border: 1px solid #0F0;
  }
  14% {
    background: #449747;
    border: 1px solid #0F0;
  }
  15% {
    background: rgba(68, 151, 71, 0);
    border: 1px solid rgba(0, 255, 0, 0.3);
  }
  19% {
    background: rgba(68, 151, 71, 0);
    border: 1px solid rgba(0, 255, 0, 0.3);
  }
  20% {
    background: #449747;
    border: 1px solid #0F0;
  }
  24% {
    background: #449747;
    border: 1px solid #0F0;
  }
  25% {
    background: rgba(68, 151, 71, 0);
    border: 1px solid rgba(0, 255, 0, 0.3);
  }
  29% {
    background: rgba(68, 151, 71, 0);
    border: 1px solid rgba(0, 255, 0, 0.3);
  }
  30% {
    background: #449747;
    border: 1px solid #0F0;
  }
  100% {
    background: #449747;
    border: 1px solid #0F0;
  }
}
@keyframes glow{
  0% {
    background: #449747;
    border: 1px solid #0F0;
  }
  50% {
    background: rgba(68, 151, 71, 0);
    border: 1px solid rgba(0, 255, 0, 0.3);
  }
  100% {
    background: #449747;
    border: 1px solid #0F0;
  }
}
@keyframes borderglow{
  0% {
    border: 2px solid rgba(133, 238, 12, 0);
  }
  50% {
    border: 2px solid rgba(133, 238, 12, 1);
  }
  100% {
    border: 2px solid rgba(133, 238, 12, 0);
  }
}
  
@keyframes glowWhiteText{
  0% {
    color: rgba(255, 255, 255, 0.8);
  }
  50% {
    color: #FFF;
  }
  100% {
    color: rgba(255, 255, 255, 0.8);
  }
}
  
@keyframes glowWhiteText{
  0% {
    color: rgba(255, 255, 255, 0.6);
  }
  50% {
    color: rgba(255, 255, 255, 1);
  }
  100% {
    color: rgba(255, 255, 255, 0.6);
  }
}
  

@keyframes itemSlide{
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
  
otc-chatbox{
  display: flex;
  border: 1px solid #555;
  flex-flow: column nowrap;
  justify-content: space-between;
  /* max-width: 500px; */
  margin: 0 auto;
  height: 100%;
  /* display: none; */
}
otc-chatbox-messages{
  display: block;
  padding: 10px;
  background: #222;
  min-height: 75px;
  /* max-height: 30vh; */
  overflow: auto;
  flex-flow: column nowrap;
  position: relative;
  /* justify-content: flex-end; */
  /* max-width: 500px; */
  height: 100%;
}
otc-chatbox-controls{
  display: flex;
  min-height: 25px;
}
otc-chatbox-controls input{
  width: 100%;
  flex-basis: 100%;
  color: #555;
}
otc-chatbox-controls button{
  flex-basis: 5rem;
}

otc-chatmessage{
  border-radius: 8px;
  display: block;
  background: #555;
  width: max-content;
  padding: 5px;
  background: #474747;
  border:  1px solid #888;
  margin: 5px auto;
  float: right;
  clear: both;
}
otc-chatmessage:before{
  content: attr(who) " | " attr(when);
  display: block;
  font-size: 10px;
  opacity: 0.5;
}

otc-chatmessage[side=Internal]{
  float: left;
  background: #33691E;
}

otc-chatmessage[side=External]{

}