::-webkit-scrollbar-button{ display: block; height: 0px; border-radius: 0px; background-color: #AAA; } 
::-webkit-scrollbar-button:hover{ background-color: #AAA; } 
::-webkit-scrollbar-thumb{ background-color: #BBB; } 
::-webkit-scrollbar-thumb:hover{ background-color: #CCC; } 
::-webkit-scrollbar-track{ background-color: #666; } 
::-webkit-scrollbar-track:hover{ background-color: #AAA; } 
::-webkit-scrollbar{ width: 5px; }
@font-face {
  font-family: "otc-tool";
  src:url("./fonts/otc-tool.eot");
  src:url("./fonts/otc-tool.eot?#iefix") format("embedded-opentype"),
    url("./fonts/otc-tool.woff") format("woff"),
    url("./fonts/otc-tool.ttf") format("truetype"),
    url("./fonts/otc-tool.svg#otc-tool") format("svg");
  font-weight: normal;
  font-style: normal;
}
icon:before,
icon:before,
[class^="otc-icon"]:before,
[class*=" otc-icon"]:before {
  font-family: "otc-tool" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html{
  height: 100%;
  overflow: hidden;
}
body{
   margin: 0 auto;
   font-family: "Segoe UI", Arial;
   font-size: 0.8em;
   background: linear-gradient(#37474F, #263238);
   height: 100%;
   transition: margin-top 0.5s ease-out, height 0.5s ease-out;
}
body.growl{
  margin-top: 75px;
  transition: margin-top 0.5s ease-out, height 0.5s ease-out;
  height: calc(100% - 75px);
}

body.loaded{
  display: block;
}
#templates{
  display: none;
}
textarea{
  font-family: "Segoe UI", Arial;
}
[text]:after{
  content: attr(text);
}
behind{
  z-index: -1;
}


content-{
  display: block;
  background: #CCC;
  width: 100%;
  height: auto;
  color: #000;
}
  inquiry-response:empty:after{
    display: block;
    content: 'No Response!';
  }
  inquiry-response{
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: 25px 15px;
    grid-gap: 1px;
    background: #607D8B;
    grid-auto-rows: 35px;
    /* box-shadow: 0px 0px 10px #333; */
  }
    inquiry-response otc-details{
      grid-row: 1;
      padding: 4px;
      position:  relative;
      /* background: #CCC; */
      display: grid;
      grid-auto-flow: column;
      grid-gap: 2px;
      /* box-shadow: 2px 2px 10px #333; */
      grid-template-columns: auto;
      justify-content: center;
      font-size: 0.8em;
      color: #CFD8DC;
    }
    inquiry-response otc-details nudge[text]{
      background: #4CAF50;
      color: #EEE;
      padding: 5px;
      line-height: 5px;
      cursor: pointer;
    }
    inquiry-response otc-details *{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    inquiry-response otc-details name :empty{
      display:none;
    }
    inquiry-response labels{
      display: grid;
      grid-auto-flow: column;
      text-align: center;
      height: 15px;
      font-size: 0.8em;
      /* background: #AAA; */
      color: #B0BEC5;
    }
    inquiry-response labels label{
      border-right: 1px dotted #455A64;
    }
    inquiry-response labels label:last-child{
      border: none;
    }
  inquiry-response form{
    min-height: 35px;
    background: #CCC;
    margin:  0;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    text-align: center;
    align-items: center;
  }
  inquiry-response form :empty{
    display: none;
  }
  inquiry-response form[executed] button{
    border-radius: 10px;
    height: auto;
    border: 1px solid #FFF7;
  }
  inquiry-response form[executed]:before{
    content: attr(executed);
    text-transform: uppercase;
  }
  inquiry-response form[executed="ask"]{
    background: #9ac69c;
  }
  inquiry-response form[executed="ask"] button{
  }
  inquiry-response form[executed="bid"]{
    background: #d57c75;
  }
  inquiry-response form[executed="bid"] button{
    background: #F44336;
    font-weight: bold;
  }
  inquiry-response form[executed] *{
    display: none;
  }
  inquiry-response form[executed] [name="executiontime"],
  inquiry-response form[executed="bid"] [name="bid"],
  inquiry-response form[executed="ask"] [name="ask"]{
    display: block;
  }

  inquiry-response form button{
    height: 35px;
    margin: 0;
    padding: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    border: none;
    cursor: pointer;
    /* width: 200px; */
  }
  inquiry-response form button:hover{
    background: linear-gradient(#CCC, #AAA);
    /* width: 200px; */
  }

  inquiry-response form.best-ask [name="ask"]{
    font-weight: bold;
    background: linear-gradient(rgba(139, 195, 74, 0.68), rgba(76, 175, 80, 0.68));
  }
  inquiry-response form.best-ask [name="ask"]:hover{
    background: linear-gradient(#8BC34A, #4CAF50);
  }
  inquiry-response form.best-bid [name="bid"]{
    font-weight: bold;
    background: linear-gradient(rgba(255, 87, 34, 0.68), rgba(244, 67, 54, 0.68));
  }
  inquiry-response form.best-bid [name="bid"]:hover{
    background: linear-gradient(#FF5722, #F44336);
  }
  inquiry-response form:empty{
    background: #B0BEC5;
    color: #2d3b42;
  }
  inquiry-response form:empty:after{
    display: block;
    opacity: 0.5;
    content: 'No Response';
  }




  otc-inquiry counterparty{
    display: block;

  }

    otc-inquiry counterparty name:hover{
      background: #CCC;
      color: #333;
      -webkit-background-clip: initial;
      -webkit-text-fill-color:initial;
    }
    otc-inquiry counterparty name{
      font-size: 24px;
      text-transform: uppercase;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      display: block;
      padding: 10px;
      font-weight: bold;
      background: -webkit-linear-gradient(#FFF, #455A64);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: bold;
    }
.growl fieldsets{
  /* height: calc(100vh - 175px); */
}
fieldsets{
  transition: height 0.5s ease-out;
  display: grid;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  padding-bottom: 0px;
  /* margin: 25px; */
  margin-bottom: 0;
  grid-template-rows: 60px max-content max-content max-content 1fr;
  grid-template-columns: 1fr 1fr;
  min-height: max-content;
  /* height: 50%; */
  flex-basis: 70%;
}
fieldset[name="quoteInfo"]{

}
fieldset[name="quoteInfo"]{
  width: max-content;
  max-width: 100%;
}
fieldset[name="response"],
fieldset[name="quoteInfo"]{
  padding: 0;
  height: min-content;
  grid-row: 2 / span 3;
  grid-column: 1;
  /* max-width: 50%; */
  /* overflow: scroll; */
}
fieldset[name="response"]{
  grid-column: 2;
  grid-row: 2;
}
#quoteinstructions:hover{
  background: #dfaa0d;
  cursor: help;
}
#quoteinstructions{
  grid-column: 2;
  /* border: 1px solid #F00; */
  text-align: center;
  width: max-content;
  margin: 0 auto;
  padding: 10px;
  background: #c09d35;
  color: #333;
  font-weight: bold;
  /* border-radius: 10px; */
  font-size: 12px;
  max-width: 100%;
  grid-row: 3;
}
fieldset{
  transition: height 0.4s;
  margin-bottom: 12px;
  /* border-color: #CCC; */
  border: none;
  /* text-transform: uppercase; */
  font-weight: normal;
}
fieldset:last-child{
  margin-bottom: 0px;
  padding-bottom: 0;
  margin-top: 25px;
}
fieldset button:hover{
  background: #78909C;
  color:#FFF;
}
fieldset button{
  background: #607D8B;
  width: 100%;
  border: none;
  padding: 5px;
  cursor: pointer;
  color: #CFD8DC;
  flex-basis: 100%;
}
fieldset button[type="submit"]{
  color: #EEE;
  background: linear-gradient(rgba(139, 195, 74, 0.6784313725490196), rgba(76, 175, 80, 0.6784313725490196));
}
fieldset button[type="submit"]:hover{
  background: linear-gradient(#8BC34A, #4CAF50);
  color: #FFF;
}
fieldset[name="actions"]{
    position: sticky;
    width: 100%;
    padding: 0;
    margin: 0;
    align-self: flex-end;
    align-items: flex-end;
    align-content: flex-end;
    flex-grow: 1;
    display: flex;
    flex-flow: row nowrap;
    bottom: 0;
    max-height: 45px;
    overflow: hidden;
    z-index: 10;
    min-height: 45px;
    background: #3e5059;
}
fieldset[name="actions"] legend{
  display: none;
}
fieldset label,
fieldset legend{
  font-weight: bold;
  color: #7d98a5;
  font-size: 0.8em;
  text-transform: uppercase;
  /* display: none; */
}
fieldset label{
  color: #37474F;
  font-weight: normal;
}
fieldset.response label{
  color: #a4a6a7;
  display: inline-block;
  margin: 11px 5px 0px;
  font-weight: normal;
  display: none;
}
fieldset.response label + span{
  font-size: 10px;
}
fieldset section{display: flex;flex-direction: row;flex-wrap: nowrap;}
fieldset section label{
  display: none;
}
fieldset section textarea,
fieldset section input{
  padding: 4px;
  margin:  0px 5px;
  width: 20%;
}

fieldset[name="clipGenerator"] section{
  overflow: hidden;
  max-height: calc(100vh - 373px);
  overflow: auto;
  margin-bottom: 10px;
}
fieldset[name="clipGenerator"] section:empty{
  margin: 0;
}
fieldset[name="actions"] section{
  width: 100%;
}
fieldset[name="actions"] section button{
  height: 45px;
  min-width: 70px;
}
fieldset[name="actions"] section button[disabled]:hover{
  cursor: not-allowed;
}

form[valid] fieldset[name="actions"] section button[name="clearbutton"]{
  background: #F44336;
}
form[valid] fieldset[name="actions"] section button[name="clearbutton"]:after{
  content: 'Retract';
}
form fieldset[name="actions"] section button[name="clearbutton"]:after{
  content: 'Clear';
}
form fieldset[name="actions"] section button[name="actionbutton"]:after{
  content: 'Reply';
}
form[valid] fieldset[name="actions"] section button[name="actionbutton"]:after{
  content: 'Response sent ' attr(timeAgo);
}
form[execute]:not([execute="done"]) fieldset[name="actions"] section button[name="actionbutton"]{
  background: linear-gradient(#8BC34A, #4CAF50);
/*   animation: executeFlash 1s ease-in-out infinite alternate; */
}
form fieldset[name="actions"] section button[name="actionbutton"][disabled],
form[valid]:not([execute]) fieldset[name="actions"] section button[name="actionbutton"]{
  opacity: 0.2;
  background: #555;
}
@keyframes executeFlash{ from{filter:brightness(0.8)} to{filter:brightness(1.1)}}
form[execute] fieldset[name="actions"] section button[name="actionbutton"]:after{
  content: 'Execute';
}
form[execute="done"] fieldset[name="actions"] section button[name="actionbutton"]{
  background: #555;
  cursor: not-allowed;
}
form[execute="done"] fieldset[name="actions"] section button[name="actionbutton"]:after{
  content: 'Execution Complete';
}
form[execute] section button:first-of-type{
  display: none;
}
form[execute="done"] *{
  animation: none !important;
}
fieldset section otc-clip{
  grid-column: span 2;
}
fieldset section #addClip,
fieldset section select[multiple]
{
  grid-column: span 2;
  padding: 5px;
}

.best{
  background: #00ff21;
}
form.otc-clip{

}
.refresh #manipulate h2:after{
  display: block;
  content: 'A refresh has been requested';

}
#manipulate form,
form[method]{
  width: calc(100% + 55px);
  padding: 0 25px;
  opacity: 1;
  position: relative;
  transition: opacity 1s;
  height: 100%;
  max-height: calc(100% - 50px);
  /* border: 1px solid red; */
  min-width: 250px;
  margin: 0;
  display: flex;
  flex-flow: column;
  left: -25px;
  overflow: auto;
  overflow-y: auto;
  padding-bottom: 0px;
  align-content: stretch;
  flex: 1;
  justify-content: space-between;
}
form#create-inquiry{
  width: 450px;
}
form.loading{
  opacity: 0.5;
}
otc-create-response,
otc-trade-requests{
  display: block;
  width: auto;
}
table{
  width: 100%;
}
#manipulate form.confirmation{
  width: auto;
  height: calc(100vh - 50px);
  background: linear-gradient(#a5cd76 50%, rgba(5, 122, 5, 0.74));
  /* padding: 10px; */
}
.confirmation h3:after{
  display: inline;
  content: attr(rfqname);
}
.confirmation .link{
    position: relative;
  font-size: 22px;
  display: block;
  background: #4CAF50;
  padding: 10px;
  
  /* border-image: linear-gradient(#0F0, #0F0); */
  color: #FFF;
  /* box-shadow: 0px 0px 20px #000; */
  text-decoration: none;
  box-shadow: -1px 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.confirmation .link:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #2E7D32 #a5cd76;
}
  #link-confirmation p[rfqcounterparties]:after {
    display: inline;
    content: attr(rfqcounterparties);
  }

table td{
  padding: 15px 0px;
  text-align: center;
  padding-bottom: 10px;
}
table tr[onclick]{
  cursor: pointer;
}
  table tr[onclick]:hover td{
    background-color: #00ff21;
  }

/*
  Flip
*/

/* entire container, keeps perspective */


#wrapper {
  height: 100%;
  perspective: 2600px;
  overflow: hidden;
  display: none;
  flex-flow: row wrap;
}
body[class] #wrapper{
  display: flex;
}
#wrapper, front, back {
  /* background-color: white; */
}
#wrapper > * {
  /* grid-row: 2; */
  overflow: visible;
  /* transition: all 2s; */
}
#wrapper header{
  display: flex;
  position: relative;
  background: linear-gradient(#263238, #212c31);
  border-bottom: 1px solid #394950;
  color: #90A4AE;
  box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.75);
  z-index: 11;
  margin-left: -30px;
  padding-left: 30px;
  text-shadow: 1px 1px #000;
  flex: 1 0 100%;
  height: 50px;
}
  #wrapper header h1{
    margin: 10px;
    line-height: 25px;
    font-size: 16px;
    width: 100%;
  }
  #wrapper header h1:before{
    display: inline-block;
    content: '';
    vertical-align: middle;
    margin-right: 10px;
    width: 30px;
    height: 30px;
    background: url('./logo.png') no-repeat center;
    background-size: 100%;
  }
  header logo{
    display: block;
    width: 50px;
    height: 100%;
    transition: all 0.4s;
    cursor: pointer;
  }
  header logo:hover{
    background: #455A64;
  }
  header logo:before{
    font-family: 'otc-tool';
    font-size: 30px;
    display: block;
    padding: 8px 10px;
    content: 'x';
  }
  .login header logo,
  .home header logo{
    margin-left: -50px;
  }
  .home header logo:before{
    content: 'x';
  }
  .home header logo:hover{

  }

  header menu:hover{
    color: rgba(255,255,255,0.8);
    background: #4f6169;
  }
  header #usermenu:not([name]){
    display: none;
  }
  header menu {
    display: block;
    background: rgb(52, 68, 75);
    margin: 0;
    padding: 0px 15px;
    cursor: pointer;
  }
  header #usermenu:before{
    display: block;
    font-size: 15px;
    content: attr(name);
    white-space: nowrap;
    padding-top: 5px;
  }
  header #usermenu:after{
    display: block;
    text-transform: uppercase;
    content: attr(counterparty);
    font-weight: bold;
  }
  #dropdownmenu {
    position: fixed;
    display: none;
    background: #1d252a;
    top: 50px;
    right: 0;
    margin: 0;
    width: 127px;
    text-align: left;
    padding-left: 0;
    border-bottom: 1px solid rgba(64, 78, 84,0);
    border-left: 1px solid rgba(64, 78, 84,0);
  }
  #dropdownmenu li {
    list-style: none;
    padding: 8px;
  }
  header menu:hover #dropdownmenu {
    display: block;
  }
  #dropdownmenu li:hover {
    background: #4f6169;
  }
  
#login{
  width: 100vw;
  height: 100vh;
  position: absolute;
  /* background: #37474F; */
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  order: 2;
  flex: 1 0 100%;
}
  #login 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;
  }
    #login 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;
    }
    #login form[success*=" "]{
      padding-top: 70px;
    }
    #login form[success*=" "]:before{
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px;
      content: attr(success); 
      display: block;
      width: calc(100% - 20px);
      animation: fadeInDown 0.8s cubic-bezier(0, 0, 0, 1.00) 0s 1 normal;
      height: auto;
      background: #4CAF50;
      color: #FFF;
    }
  #login form *{
    margin-bottom: 10px;
    border: none;
    padding: 5px 5px;
    border-bottom: 1px solid #78909C;
    background: none;
    color:  #FFF;
    position: relative;
    z-index: 10;
  }

  #login form#login-form input::placeholder{
    color: #B0BEC5;
  }
  #login form#login-form button[type="submit"]:hover {
    background: #4CAF50;
  }
  #login form#login-form button[type="submit"]{
    cursor: pointer;
    background: #43A047;
    color: #CFD8DC;
  }
  #login form#login-form button[type="forgotpassword"]{
    cursor: pointer;
    background: rgb(48, 179, 219);
    color: #CFD8DC;
  }

.login #login{
  display: block;
}

/**
 * Forgot Password View 
 */

/* section#forgot #forgot-password {
  display: none;
} */
forgot-password section#forgot #forgot-password input::placeholder{
  color: #B0BEC5;
}
forgot-password section#forgot #forgot-password button[type="forgotpassword"]:hover {
  background: #4CAF50;
}
forgot-password section#forgot #forgot-password button[type="forgotpassword"]{
  cursor: pointer;
  background: #43A047;
  color: #CFD8DC;
}
/**
 * Reset Password View 
 */

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

#manipulate{
  height: 100%;
  /* width: 100%; */
}
  #manipulate .done:after{
    content: attr(class);
  }
  #manipulate.flipped card{
    transform: rotateY(180deg);
  }
#wrapper #list{
  width: 240px;
  background: linear-gradient(#263238, #1a2125);
  box-shadow: 6px 0px 53px 0px rgba(0,0,0,0.75);
  border-right: 1px solid #37474F;
  z-index: 1;
  transition: all 0.5s;
  height: 100%;
}
#wrapper #list:empty{
  box-shadow: none;
  margin-left: -240px;
}
#wrapper #list:empty:after{
  display: block;
  content: 'No Inquiries Found';
  padding: 20px
  font-weight: bold;
  color: #FFF;
  opacity: 0.3;
  text-align: center;

}
body[class*="act"] #list{
  box-shadow: 5px 0px 20px 0px rgba(0,0,0,0.70);
}
  #create-inquiry-btn{
    font-size: 12px;
    width: 200%;
    padding: 0px;
    /* position: relative; */
    /* bottom: 0px; */
    border: none;
    height: 45px;
    cursor: pointer;
    padding-left: 0px;
    display: flex;
    flex-direction: row;
    margin:  0;
    margin-left: -100%;
    align-items: flex-start;
    transition: all 0.5s;
    display: none;
  }
  .createinquiry #create-inquiry-btn{
    margin-left: 0%;
  }
  #create-inquiry-btn *{
    display: block;
    flex-basis: 100%;
    padding: 12px;
    align-self: stretch;
  }
  #create-inquiry-btn create{
    color: #FFF;
    background: linear-gradient(rgba(139,195,74,50), rgba(76, 175, 80, 50));
  }
  #create-inquiry-btn create:hover{
    background: linear-gradient(#8BC34A, #4CAF50);
  }
  #create-inquiry-btn back:before,
  #create-inquiry-btn create:before{
    font-family: 'otc-tool';
    display: inline-block;
    font-size: 25px;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 15px;
    margin-bottom: 0px;
  }
  #create-inquiry-btn create:before{
    content: '6';
  } 
  #create-inquiry-btn back:before{
    content: 'q ';
  }
/*   .createinquiry #create-inquiry-btn:after{
    content: 'Back';
  } */
  #create-inquiry-btn back{
    background: linear-gradient(rgba(255, 87, 34, 0.68), rgba(244, 67, 54, 0.68)); */
  }
  #create-inquiry-btn back:hover{
    background: linear-gradient(#FF5722, #F44336);
  }
  
  #create-response-btn:after{
    content: 'Respond';
  }
    
  .createresponse #create-response-btn:after{
    content: 'Cancel';
  }
    #create-inquiry-btn back{
      display
    }
.login #wrapper #monitor *{
  display: none;
}
#wrapper #monitor{
  background: linear-gradient(#37474F, #263238);
  color: #EEE;
  height: 100%;
  overflow: hidden;
  position: relative;
  flex-basis: calc(100% - 300px);
  /* border:  1px solid red; */
  display: inline-block;
  flex-grow: 1;
  max-width: none;
  margin-right: 0;
}
  #list:empty ~ #monitor{
    flex-basis: calc(100% - 1px);
  }
  #inquiryDetails{
    max-height: 100%;
    position: relative;
  }
  #monitor #details{
      /* padding: 20px 20px 0px 20px; */
      overflow: hidden;
      width: auto;
      height: 100%;
      max-height: 100%;
      position: relative;
      /* max-width: calc(100% - 387px); */
  }
  #monitor #settings{
     
  }

  #wrapper #monitor #settings h2{
    margin: 0;
    position: sticky;
    padding: 12px;
    background: #2b383f;
    top: 0;
    border-bottom: 1px solid #555;
    grid-column: 1 / 3;
    color: #CCC;
    align-items: center;
    width: calc(100% + 55px);
    position: relative;
    left: -25px;
    top: -21px;
    height: 50px;
    /* margin-bottom: 0; */
  }
/*   #details:empty:before{
    content: 'You\'re all set!';
    padding-top: 30px;
    text-align: center;
    display: block;
    font-size: 40px;
    color: #B0BEC5;
    text-shadow: 1px 1px #000;
    animation: fadeInDown 1s ease-out 0s 1 both;
  }
  #details:empty:after{
    content: 'Check back later for more trades!';
    padding: 0px;
    text-align: center;
    display: block;
    font-size: 20px;
    color: #90A4AE;
    animation: fadeInDown 1s ease-out 0s 1 both;
    
  } */
  #monitor .dialogues{
    display: grid;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    
    position: absolute;
    

  }
  #monitor .dialogues:empty{
    display: none;
  }
  #wrapper #monitor h2{
    margin-top: 0;
    position: sticky;
    padding: 10px 25px;
    background: #2b383f;
    top: 0;
    border-bottom: 1px solid #555;
    grid-column: 1 / span 2;
    color: #CCC;
    align-items: center;
    width: calc(100% + 55px);
    position: relative;
    left: -25px;
    top: -15px;
    height: 40px;
  }
  .refresh #wrapper #monitor h2{
    background: #f44336;
  }
  .refresh #wrapper #monitor h2:after{
    display: block;
    content: "A refresh has been requested. If prices are still good, hit Reply.";
    position: absolute;
    color: #f44336;
    margin-top: 5px;
    text-align: center;
    width: 100%;
    top: 100%;
    z-index: 1;
    font-size: 15px;
  }
  otc-inquiry{
    display: none;
    position: absolute;
  }
  otc-trade-response *{
    display: block;
    margin-left: 20px;
  }
/* flip speed goes here */
card {
  transition: 0.4s;
  transform-style: preserve-3d;
  width: 450px;
  position: relative;
  margin-left: -500;
  display: block;
  will-change: margin;
}
body[class*="creat"] card{
  margin-left: 0px;
  display: block;
}
body[class*="createResponse"] card {
  width: 250px;
}
/* hide back of pane during swap */
card front, card back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: block;
}

/* front pane, placed above back */
card front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
  /* width: 50px; */
}

/* back, initially hidden pane */
card back {
  right: 0;
  transform: rotateY(180deg);
}

/** Welcome **/
welcome{
  display: none;
  position: absolute;
}

.home welcome {
  display: block;
  margin: 0px 50px;
  color: #E0E0E0;
}



welcome h3{
  font-size: 30px;
  color: #E0E0E0;
  text-shadow: 2px 2px #000;
  margin-bottom: 0;
}
welcome i{
  color: #AAA;
}
welcome div{
  color: #CCC;
  font-size: 20px;
  text-transform: uppercase;
  margin-left: 20px;
  margin: 20px;
  width: auto;
  position: relative;
  white-space: nowrap;
}

welcome div > *{
  position: relative;
  display: inline-block;
  right: 0;
  font-size: 40px;
}
welcome div:last-child{
  
}



/** OTC Dialog **/
#dialogues{
  display: flex;
  flex-basis: 100%;
  position: absolute;
  width: 100%;
  height: calc(100% - 133px);
  /* z-index: 9; */
  align-items: center;
}
#dialogues:empty{
  /* display: none; */
}
#dialogues + #details{
  opacity: 0.2;
  transition: opacity 2s cubic-bezier(0.215, 0.610, 0.355, 1.000)
}

#dialogues:empty + #details{
  opacity: 1;
  transition: opacity 0.4s;
}
#dialogues fieldsets{
  padding: 0px;
}
otc-dialog{
  animation-duration: 0.4s !important;
  display: block;
  width: calc(100vw / 3);
  margin: 0 auto;
  height: auto;
  background: #E0E0E0;
  border: 1px solid #FFF;
  position: relative;
  padding: 0;
  box-shadow: 0px 10px 30px #000;
}
otc-dialog h3{
  background: #B0BEC5;
  height: 30px;
  margin-top: 0;
  padding: 10px;
  font-size: 20px
}
otc-dialog message{
  display: block;
  padding: 10px;
  margin-bottom: 20px;
  /* text-transform: uppercase; */
  font-size: 16px;
}
  otc-dialog message side{

  }
  otc-dialog message value{
    font-size: 25px;
    font-weight: bold;
  }
  otc-dialog message counterpartyperson,
  otc-dialog message counterparty{
    font-size: 12px
  }
  otc-dialog message counterpartyperson{
    border-right: 1px solid #000;
    padding-right: 10px;
  }
otc-dialog fieldsets{
  height: auto;
}
otc-dialog fieldset[name="actions"]{
  bottom: 0;
  left: 0;
}
otc-dialog button:last-child{
  background: linear-gradient(#4CAF50, #388E3C);
}