/*
//Copyright 2010 Made Headway Limited
*/

/* Reset css */
/* Global styling: */
form, table, td, tr, button, br, img
{
    margin: 0;
    padding: 0;
}
img
{
    border: 0;
}
html
{
    overflow-y:scroll;
}
body 
{ 
    font-family: Verdana,Geneva,Arial,sans-serif;
    /* background:#10131c url('/images/bg.jpg') no-repeat 50% 0%;     */
    background:#1A202C;
    background-attachment: fixed;
    color: #e2dbcd;
    font-size: 11px;
}
span
{
    min-height:1px;
}
input[type="text"],input[type="password"], textarea, select
{
    font-size:12px;
    padding:2px 4px;
    border:1px solid #DDD;
    background-color:#FFF;
    color:#000;
}
table
{
    border-collapse:collapse;
}
td
{
    vertical-align:top;
}

textarea
{
    height:90px;
}

button
{
    cursor:pointer;
    font-size:14px;
    color:#222;
    border:2px solid #FFF;
    border-radius:8px;
    color:#000;
    background-color:#EEE;
    padding:4px 20px;
    margin:1px 1px 1px 1px;
    box-shadow:1px 1px 2px #e2dbcd;
}
button:hover
{
    background-color:#e2dbcd;
}
button[disabled]
{
    color:#AAA;
}


/* Simple CSS */
#main
{
    width:90%;
    min-width:400px;
    margin-left:auto;
    margin-right:auto;
}

#contents
{
    padding:10px 0px 5px 0px;
}

.tagline
{
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 5px;
    padding-bottom:9px;
    min-height: 57px;
}

.tagline .mainLogo
{
    float:left;
    margin:3px 5px 0px 20px;
    background-color:#fff;
    /* background-color:#e2dbcd; */
    /* padding:12px; */
    padding:1px;
    border-radius:8px;
    box-shadow:2px 2px 2px rgba(0,0,0,0.3);
}
.tagline .mainLogo > img {
  /* width:164px; height:164px; */
  width:174px; height:174px;
  border-radius:8px;
}
.tagline  .sysLogo
{
    float:right;
    margin:10px 5px 0px 10px;
}

.loginpanel
{
    padding-top:10px;
    padding-bottom:16px;
    max-width:300px;
    margin-left:auto;
    margin-right:auto;
}
.loginpanel .para
{
    background-color:#EFEFEF;
}
.loginpanel .para button
{
    width:80px;
}
.loginpanel td
{
    padding:2px 2px 2px 2px;
}

.loginTable
{
    margin-left:auto;
    margin-right:auto;
}
.loginTable tr td
{
    padding-top:4px;
    vertical-align:middle;
}

.loginpanel .optionTable
{
    width:100%;
    border-top:1px solid #557;
    border-bottom:1px solid #557;
}
.loginpanel .optionTable td
{
    vertical-align:middle;
}
.loginpanel input
{
    width:160px;
}

.title .subline
{
    font-size:13px;
    padding-left:8px;
}

.baseline
{
    font-size:10px;
    margin:3px 3px 3px 3px;
    padding:4px 4px 4px 20px;
    text-align:center;
}

.loggedInPanel
{
    text-align:right;
    font-size:14px;
    color:#e2dbcd;
    margin-top:16px;
    border-top:1px solid #e2dbcd;
    margin-bottom:2px;
}
.loggedInPanel button
{
    margin-left:16px;
}

a:link, a:visited
{
    color: #977 !important;
}
a:hover {
  color: #A88 !important;
}

.subtitle
{
    font-weight:bold;
    margin-top:4px;
    margin-bottom:10px;
}

.title
{
    margin-top:12px;
    background-color:#e2dbcd;
    color:#000;
    
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    
    font-size:18px;
    padding:10px 20px;
    margin-bottom:1px;
}

.title:first-child {
  margin-top:4px;
}

.para div.title
{
    font-size:14px;
    margin-top:12px;
    margin-bottom:0px;
    
    background-color:#EFEFEF;
}

.para .para
{
    background-color:#EFEFEF;
    color:#000;
    overflow-x:auto;
}

.para
{    
    padding:10px 20px;
    font-size:11px;
    background-color:#FFF;
    color:#000;
}

.smallPrint
{
    margin:20px 10px 10px 10px;
    font-size:10px;
}

.options ul
{
    margin-top:2px;
}

.clearer
{    
    clear:both;
    width:1px;
    height:0px;
    font-size:0px;
}

/* Dialog styles */
.ai_dialog
{
    border:1px solid #000;
    background-color:#BBB;
    overflow-x:hidden;
    color:#000;
    font-size: 12px;
    box-shadow:3px 3px 4px rgba(0,0,0,0.2);
}
.ai_dialog_content {
  background-color:#CCC;
}
.ai_dialogInnerFrame
{
    border:1px solid #000;
    margin: 1px 1px 1px 1px;
    background-color:#999;
}
.ai_titlebar
{
    cursor:default;
    clear:both;

    text-align:center;
    
    margin:2px 4px;
    padding:10px 20px;

    background-color:#AAA;
    color: #FFF;
    font-size: 14px;
}
.ai_button
{
    float:right;
    margin:4px 6px 2px 2px;
    cursor:pointer;
}
.ai_dialog_content
{   
    border-top:1px solid #FDD;
    padding:5px 5px 5px 5px;
}
.ai_dialog_content div
{
    
}

/* Calendar stuff */
.calendar
{
    margin-left:auto;
    margin-right:auto;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
.calendar td
{
    padding:1px 2px 1px 2px;
    border:1px solid #FFF;
    text-align:right;
}

.calSelected
{
    background-color:#FFFF33;
    color:#F00;
    font-weight:bold;
    cursor:default;
}

.calInMonth
{
    background-color:#FFAA66;
    color:#000;
    cursor:default;
}
.calOutMonth
{
    background-color:#66AAFF;
    color:#444;
    cursor:default;
}

/*.noScriptErrorBar*/
noscript div, .error
{
    display:block;
    border-top:2px solid #900;
    border-bottom:2px solid #900;

    padding: 4px 16px 4px 16px;
    margin:2px 0px 2px 0px;
    background-color:#F99;
    color:#900;
}
.needsScript
{
    /* Code overrides this with style (if code exists) */
    display:none;
}


/* Menu interface */
.menuBar a {
  color:#e2dbcd !important;
}

.menuBar
{
    font-family: Helvetiva,Arial,sans-serif;
    text-transform:uppercase;
    
    background-color:#000;
    font-size:14px;
}
.menuBar .item
{
    cursor:pointer;
    float:left;
    padding:0px 18px;
    height:50px;
    line-height:50px;
}
.menuBar .item:hover
{
    background-color:#3d3d3d;
}
.menuBar .item.selected
{
    background-color:#4d4d4d;
    cursor:default;
}
.menuBar .item.selected:hover
{
    background-color:#4d4d4d;
    text-decoration:none;
}

.menuBar .item.disabled
{
    cursor:default;
    color:#444 !important;
}
.menuBar .item.disabled:hover
{
    text-decoration:none;
    background-color:#000;
}


.ral
{
    text-align:right;
}
.lal
{
    text-align:left;
}
.cal
{
    text-align:center;
}

.scriptLoadingBlock
{
    width:200px;
    height:32px;
    background:#FFF url('images/scriptLoad.gif') no-repeat top left;
}

/* Specific Comedy Review */
.co_dataTable
{
    padding: 8px 2px 8px 2px;
    margin-top:4px;
    margin-bottom: 8px;
    min-height:120px;
    max-height:400px;
    overflow-y:scroll;
    overflow-x:auto;
    background-color:#FFF;
    border: 1px solid #000;
    cursor:default;
}

.co_dataTable td
{
    padding:2px 6px 2px 6px;
}
.co_dataTable tr.hd td
{
    border-bottom:1px solid #666;
    font-weight:bold;
}
.co_dataTable tr.odd td
{
    background-color:#EFEFEF;
}
.co_dataTable tr.selled td
{
    background-color:#449;
    color:#FFF;
}

.co_table
{
    margin-left:auto;
    margin-right:auto;
}
.co_table tr td
{
    padding:2px 8px 2px 8px;
}
.co_table select, .co_table input, .co_table textarea
{
    width:300px;
}
.co_table textarea
{
    height:80px;
}

.judgeStatus
{
    text-align:center;
    color:#000;
}
.judgeStatus td.showHeader
{
    text-align:left;
    font-weight:bold;
}
.judgeStatus td.showRow
{
    text-align:left;
}
.judgeStatus td.show
{
    color:#F00;
}
.judgeStatus td
{
    border-right:1px solid #000;
    border-bottom:1px solid #3b3b3b;
}
.judgeStatus .judge
{
    background-color:#FF6;
}
.judgeStatus .scout
{
    background-color:#AAA;
}
.judgeStatus .seen
{
    background-color:#6F6;
}
.judgeStatus .scheduled
{
    background-color:#66F;
}
.judgeStatus .none
{
    background-color:#F66;
}
.judgeStatus tr.hd td
{
    border-bottom:2px solid #888;
}

.co_table input.categories
{
    width:220px;
}
.co_table input.date
{
    width:220px;
}
.co_optionButtons
{
    margin-top:3px;
    text-align:center;
}
.co_optionButtons button
{
    width:inherit;
}

#catSelection
{
    margin-top:16px;
    margin-left:auto;
    margin-right:auto;
    width:300px;
}

#co_ss_monthDisplay
{
    margin-top:10px;
}
.co_ss_calDay
{
    cursor:pointer;
    padding:5px 5px 5px 5px;
    background-color:#DDD;
    border:1px solid #666;
}
#co_ss_calInfo
{
    margin-left:20px;
    width: 300px;
    height: 150px;
    overflow-y:scroll;
    border: 1px solid #EEE;
}
.co_showingInfo
{
    border:1px solid #FDD;
    margin:2px 2px 2px 2px;
    padding: 3px 3px 3px 3px;
}

.co_ss_label
{
    text-align:center;
    vertical-align:middle;
    width:80px;
}
#co_ss_monthDisplay
{
    margin-left:20px;
}

#co_email_text
{
    width:450px;
    height:200px;
}

.co_daySchedule
{
    position:relative;
}

#co_scheduleOverlay
{
    position:absolute;
    top:0px;
    left:0px;
}
#co_scheduleOverlay .co_scheduleItem
{
    position:absolute;
    left:80px;
    border:1px solid #000;
    padding:4px 4px 4px 4px;
    overflow-y:auto;
    color:#000;
}

.availableShows {
  color:#000;
}

.co_labels div.hour
{
    height: 30px;
    border-top: 1px solid #CCD;
    border-bottom: 1px solid #CCD;
    margin: 1px 2px 1px 2px;
    padding: 4px 4px 4px 4px;
}

.co_labels div.hour div.availableShows
{
    cursor:pointer;
    float:right;
    border:1px solid #CCD;
    margin:1px 1px 1px 1px;
    padding:2px 2px 2px 2px;
    height:20px;
    width:120px;
    text-align:center;
}

#co_avaiableShows
{
    overflow-y:scroll;
    height:280px;
    border:1px solid #AAD;    
    margin-bottom:16px;
}
.co_availShowsTable
{
    cursor:pointer;
    min-width:95%;
}
.co_availShowsTable tr td
{
    padding:4px 12px;
    border-left:1px solid #3b3b3b;
    border-right:1px solid #3b3b3b;
    border-bottom:1px solid #3b3b3b;
    
    /*background-color:#FFF;*/
}
.co_availShowsTable tr.hd td
{
    font-size:13px;
    border-bottom:1px solid #000;
    vertical-align:bottom;
    text-align:center;
    background-color:#e2dbcd;
    color:#000;
}
.co_availShowsTable tr.sel td
{
    background-color:#666;
    color:#FF6;
}

.co_reviewTable
{
    width:90%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
}
.co_reviewTable td.titleCol
{
    font-weight:bold;
    width:160px;
}
.co_reviewTable tr td
{
    padding:2px 8px 2px 8px;
}
.co_reviewTable select, .co_reviewTable input, .co_reviewTable textarea
{
    width:98%;
}
.co_reviewTable textarea
{
    height:100px;
}
.co_reviewTable td
{
    border:1px solid #DDE;
}
.co_reviewTable tr.hd td
{
    border-bottom:1px solid #444;
    font-weight:bold;
    text-align:center;
}

.para.back
{
    text-align:right;
}

.co_reviewSummary td
{
    padding:4px 4px 4px 4px;
    border:1px solid #DDD;
    text-align:right;
}

td.textCol
{
    width:25%;
}

.co_resultPages
{
    margin-left:auto;
    margin-right:auto;
}
.co_resultPageLabel
{
    float:left;
    font-weight:bold;
    padding:4px 4px 4px 4px;
}

.co_reportSearch 
{
    margin:16px auto 2px auto;
    min-width:380px;
}
.co_reportSearch td
{
    padding:2px 4px 2px 4px;
}
.co_reportSearch select, .co_reportSearch input
{
    width:200px;
}
.co_reportSearch input[type=checkbox]
{
    width:20px;
}
.co_reportSearch select.ltgt
{
    width:50px;
}

a.noul
{
    text-decoration:none;
}

/*e-mail preview*/
.emailPreview
{
    display:block;
    font-family:Courier New;
    font-size:12px;
    font-weight:bold;
    overflow:scroll;
    height:250px;
    width:90%;
    border:1px solid #e90b8a;
    padding:6px 10px 6px 10px;
    margin:4px auto 8px auto;
}

/*review detail*/
#co_showReviewDetails
{
    overflow-y:scroll;
    border:1px solid #666;
    height:270px;
    width:96%;
    margin-left:auto;
    margin-right:auto;
    margin:2px 0px 10px 0px;
    padding:2px 2px 2px 2px;
}
.co_showReviewDetailTable
{
    width:96%;
    margin:2px 0px 4px 0px;
    padding:2px 2px 2px 2px;
    margin-left:auto;
    margin-right:auto;
    margin-top:8px;
    margin-bottom:10px;
}
.co_showReviewDetailTable td
{
    padding:2px 4px 2px 4px; 
    border:1px solid #FDD;
}
.co_showReviewDetailTable td.hd
{
    width:26%;
    font-weight:bold;
    font-style:italic;
}

.co_userPeriodView
{
    min-width:400px;
    width:40%;
    margin:12px auto;    
}
.co_userPeriodView td
{
    padding:4px;
    vertical-align:baseline;
}
.co_userPeriodView td.titleCol
{
    text-align:right;
}
input.periodSel
{
    width:30px;
}

.submitField
{
    width:220px;
    resize:none;
}
.co_userPeriodAvails td
{
    padding:4px 12px;
    /*background-color:#000;*/
}
.co_userPeriodAvails
{
    margin:12px auto;
}
.co_userPeriodAvails tr.odd td
{
    background-color:#FbFbFb;
}
.co_userPeriodAvails .header
{
    font-weight:bold;
    border-bottom:2px solid #e2dbcd;
}

.venueStatus
{
  float:right;
  width:20px;
  height:20px;
  border:3px solid #444;
  border-radius: 12px;
  background-color:#FFF;
  opacity:0.8;
  cursor:pointer;
}
.venueStatus.rejected
{
  background-color:#D00;
  border-color:#900;
}
.venueStatus.deferred
{
  background-color:#FA0;
  border-color:#C90;
}
.venueStatus.confirmed
{
  background-color:#0D0;
  border-color:#090;
}

.wltable {
  color:#000;
}
.wltable tr td {
  background-color:#888;
}



.individualShowApproval .venueTitle {
  font-weight:bold;
  font-size:22px;
}

.individualShowApproval .approvalTable {
  margin-top: 32px;
}
.individualShowApproval .onDate {
  margin-bottom:18px;
  font-size:14px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  
  background-color:#FFF;
}
.individualShowApproval .onDate .dateLabel {
  font-size:18px;
  background-color:#124;
  padding:6px 12px 4px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  color:#FFF;
}
.individualShowApproval .onDate .eventLine {
  padding:4px 6px;
  margin:4px 6px;
  border: 1px dotted #888;
}
.individualShowApproval .onDate .eventLine > div {
  display:inline-block;
  position:relative;
  padding:18px 4px 4px;
  width:200px;
}
.individualShowApproval .onDate .eventLine > div::before {
  color:#444;
  font-style:italic;
  position:absolute;
  top:0px;
  left:0px;
}
.individualShowApproval .onDate .eventLine > div.eventTitle {
  display:block;
  width:600px;
  max-width:100%;
}
.individualShowApproval .onDate .eventLine > div.eventTitle::before {
  content:"Show";
}
.individualShowApproval .onDate .eventLine > div.eventTime::before {
  content:"Start";
}
.individualShowApproval .onDate .eventLine > div.eventJudge::before {
  content:"Judge";
}
.individualShowApproval .onDate .eventLine > div.eventStatusSelection::before {
  content:"Confirmation";
}
.eventStatusSelection select {
  font-size:18px;
  background-color:#AAF;
  border:1px solid #00A;
  padding:4px 8px;
}
.individualShowApproval .onDate .eventLine > div.statusReason {
  display:block;
  width:600px;
  max-width:100%;
}
.individualShowApproval .onDate .eventLine > div.statusReason input {
  width:300px;
  max-width:100%;
}

.pseudoButton {
  cursor:pointer;
  display:inline-block;
  vertical-align:middle;
  padding:4px 8px;
  background-color:#AAF;
  border:1px solid #00A;
  font-size:16px;
  font-weight:bold;
  color:#FFF;
  border-radius:8px;
}
.pseudoButton:hover {
  background-color:#66B;
}

.popper td {
  border-top:1px dotted #666;
  padding:4px 8px 16px;
  border-bottom:2px solid #000;
}

tr.modified td {
  color:#999;
}

.rebookUI {
  border:1px solid #000;
  background-color:#DDDDFF;
  border-radius:4px;
  margin:4px auto;
  padding:8px 20px;
  width:90%;
}
.rebookUI .ral {
  margin-top:12px;
}
.rebookUI .field {
  display:inline-block;
  vertical-align:top;
  margin-top:12px;
}
.rebookUI .field.fullWidth {
  display:block;
}
.rebookUI .field .fieldLabel {
  font-size:12px;
  font-style:italic;
}

.miniScheduleBack {
  position:relative;
  width:100%;
  height:100px;
  background-color:#FFF;
  border:1px solid #000;
}
.miniScheduleBack .hourMarker {
  position:absolute;
  top:0px;
  font-style:italic;
  font-size:10px;
  padding:4px;
  height:100%;
  border-left:1px dotted #666;
}
.miniScheduleBack .bookedMarker {
  position:absolute;
  top:20px;
  border:1px solid #000;
  height:78px;
  overflow:hidden;
  text-overflow: ellipsis;
}


.miniScheduleBack .neededTime {
  position:absolute;
  background-color:#FDD;
  top:0px;
  height:100%;
}



.loginpanel.mfaMode {
  min-width:600px;
  width:50vw;
  max-width:initial;
}
.loginpanel.mfaMode .para {
  font-size:14px;
}

.loginpanel.mfaMode .para button {
  width:initial;
}
.loginpanel.mfaMode .para button:first-child {
  margin-left:32px;
}
.loginpanel.mfaMode img {
  display:block;
  margin:12px auto 6px;
}
.loginpanel.mfaMode .mfaAlt {
  font-size:12px;
  color:#444;
  text-align:center;
  margin-bottom:12px;
}

.loginpanel.mfaMode .error {
  margin-bottom:12px;
}

.mfaContainer {
  text-align:center;
}

input.mfaInput[type="text"]
{
  display:block;
  width:calc( 12ch + 12px );

  --w: 1ch;   /* control the width for each letter */
  --g: .15em; /* the gap between letters */
  --b: 2px;   /* the border thickness */
 
  --c: #888;
  --_n: 6; 
  
  font-size: 70px;
  line-height: 1.5; /* control the height */
  letter-spacing: var(--w);
  font-family: monospace;
  padding-left: calc((var(--w) - var(--g))/2);
  clip-path: inset(0 calc(var(--w)/2) 0 0);
  background:
    repeating-linear-gradient(90deg,
      var(--c) 0 var(--b),#0000 0 calc(1ch + var(--w) - var(--g) - var(--b)),
      var(--c) 0 calc(1ch + var(--w) - var(--g)),#0000 0 calc(1ch + var(--w))),
    conic-gradient(at calc(100% - var(--g) - 1px) var(--b),#0000 75%,var(--c) 0) 
     0 0/calc(1ch + var(--w)) calc(100% - var(--b));
  margin-left:auto;
  margin-right:auto;
  margin-bottom:16px;
  box-sizing:border-box;
}