/* 3D dialog, styled a bit like Aero glass, no transparency yet (ask Matt)

The following works, but our title area is a bit tall, and we really want the
shadow to be opacity rather than against white.

Good enough to proove concept however.

*/
:root {
  --dialog-border-color: rgb(180, 200, 230);
  --dialog-border-radius: 8px;
  --dialog-border-color-subtle: #ee4;
}

.bddialog
{
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 99;

  display: flex; /* inline-block; */
/*  height: 100%; */
  flex-direction: column;

/*  background-color: var(--dialog-border-color); */

  box-shadow: 2px 2px 10px 5px #444;

  border-top-left-radius: var(--dialog-border-radius);
  border-top-right-radius: var(--dialog-border-radius);
  border-bottom-left-radius: var(--dialog-border-radius);
  border-bottom-right-radius: var(--dialog-border-radius);

  border: solid 10px var(--dialog-border-color);

}


@keyframes slideIn {
  from {right: 0rem; opacity: 0; }
  33% {opacity: 1; }
  to {right: 8rem; }
}

@keyframes growIn {
  from {right: 0rem; opacity: 1; }
  33% {opacity: 1; }
  to {right: 8rem; opacity: 1}
}


@keyframes fadeIn{
  from {opacity:0; }
  to { opacity:1; }
}

.subtleMessage {
  bottom: 1rem;
  right: 8rem; /* to miss chat button */
  top: auto;
  left: auto;
  animation-name: growIn;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-delay: 0s;
}

.bddialog.subtleMessage {
  box-shadow: none;
  background-color: var(--dialog-border-color-subtle);
  border-top-left-radius: unset;
  border-top-right-radius: unset;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  overflow: hidden;
}

.hiddendialog
{
  display: none;
}

.bddialog .topborder2
{
  cursor: pointer;
  background: var(--dialog-border-color);
  height: 35px;
  margin: 0;
/*  border-top-left-radius: var(--dialog-border-radius); */
/*  border-top-right-radius: var(--dialog-border-radius); */
/*  flex-shrink: 1; */
}

.bddialog.subtleMessage .topborder2
{
  cursor: default;
  background: none;
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}

.bddialog .dialogcontent2
{
  background: white;
/*  display: inline-block; */
  padding: 0px 10px;
  min-height: 0;
  height: 100%;
/*  min-width: 300px; */
/*  margin-left: 10px; */
/*  margin-right: 10px; */
/*  margin-bottom: 10px; */
/*   border-bottom-left-radius: var(--dialog-border-radius); */
/*  border-bottom-right-radius: var(--dialog-border-radius); */
/*  flex-grow: 1; */
}

.bddialog.subtleMessage .dialogcontent2
{
  color: red;
  font-size: 0.6rem;
  padding: 0px 5px;
  min-width: 300px;
  margin-left: 3px;
  margin-right: 3px;
  margin-bottom: 3px;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
}

.bddialog .buttonbar2 {
/*  position: relative; */
/*  top: 4px; */
/*  right: 5px; */
  float: right;
}
.bddialog .closebutton2 {
  height: 25px;
}

.bddialog .closebutton2:hover {
  transform: scale(1.4);
}

.bddialog .caption {
/*  position: relative; */
  margin-left: 5px;
  margin-right: 5px;
  color:#FFF;
  font-weight: bold;
  overflow: hidden;
  font-size: 1.7em;
  line-height: 1.7em;
  white-space: nowrap;
  float: left;
}

.bddialog.subtleMessage .caption {
  margin: 10px;
  color:red;
  font-weight: normal;
  font-size: 1.4em;
  white-space: nowrap;
}

/* Buttons */
.buttonbar
{
    float:right;
/*    height:30px; JD - do we need this ? */
    margin-right: 20px;    /* 18px positions the corner cross */
    margin-top: 20px;
    margin-bottom: 5px;
/*    width:150px; JD - do we need this? - I am using it for dialog buttons */
    clear: both; /* always beneath? */
/*    overflow-x: hidden; */
}

/*Close button*/
/*
    .closebutton
    {
        width:44px;
        height:18px;
        display:block;
        position:relative;
        float:right;
        text-decoration:none;
        left:0px;
        top:0px;
    }
    .closebutton .icon
    {
        background: transparent url("../../css/images/buttons.close.png") 0px 0px no-repeat;
        width:44px;
        height:18px;
        display:block;
    }
    .closebutton .glow
    {
        width:64px;
        height:38px;
        position:absolute;
        left:-9px;
        top:-9px;
    }

    .closebutton:hover .glow
    {
        background: transparent url("../../css/images/buttons.glow.png") -0px 0px no-repeat;
    }
    .closebutton:hover .icon
    {
        background: transparent url("../../css/images/buttons.close.png") -44px 0px no-repeat;
    }

*/

.scroller { /* for a container that needs scrolling */
    background: #EEE; /* matches jQuery UI default widget content */
    overflow-y: scroll;
    height: 300px;
    min-width: 200px;
    max-width: 500px;
    border: solid 1px lightgray;
    padding-top: 5px;
}

.alertConfirm input {
    font-size: 1.6em;
    height: 24px;
    width: 100%;
}

.alertConfirm .question {
    padding: 10px 0px 10px 0px;
    margin: 10px 0px 10px 0px;
    font-size: 1.5em;
    line-height: 1.2em;
}

.alertConfirm h3 {
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 15px;
  margin-bottom: 10px;
}

.alertConfirm img {
  margin-right: 10px;
}

.alertConfirm p {
   margin-top: 5px;
}

.alertConfirm .description {
    display: inline-block;
    vertical-align: top;
    font-size: 0.9rem;
    max-width: 700px;
}

.alertConfirm .example {
    width: 250px;
}