/* Copyright (c) Perluceo Ltd 2013-19

Author: Val Wardlaw
Type: css stylesheet
History: 1st Feb 2018 creation

*/
html{width: 100%; height: 100%}

body{ body: 100%; height: 100%; margin: 0; padding: 0;  font-family: Arial,sans-serif; font-size: 14px;} 
* {
    box-sizing: border-box;
}

.draggable{ opacity:0.5}
.isdraggable{position: fixed; z-index: 100}
.resizable{resize:both;overflow:auto}

/*icons   */
.play:before{content:"\25B6";}
.stop:before{content: "\2587";}  /* 23F9 */
.pause:before{content:"\2587";}
.prev:before{content:"\25C1";}
.next:before{content:"\25B7";}
.autoplay:before{}
.fullscreen:before{content:"\2723";}
.close:before{content:"\2715";}

.east:before{content: "\25B7";}  /*"\02C3";}  */
.big_east:before{content:"\25B6"}
.west:before{content:"\25C1"}
.big_west:before{content:"\25C0"}


.up:before{ content:"\25B2";}
.down:before{content:"\25BC";}

.align-center{
    display: flex;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    
}
/* fieldSet */

.apoco_fieldset div label{ margin-right: 1em; line-height: 1.4;} 
.apoco_fieldset div.label label{margin-right: 1em;} 

.apoco_paginate{}
.apoco_paginate button{ width: 2em; text-align: center; padding:0; margin: 0;}

/* slideshow */

.apoco_slideshow div.pic_area{position: relative;height: 100% }
.apoco_slideshow div.slideshow{position: relative;height: 100% }  /* need to repeat this for stupid ie 11 */
.apoco_slideshow div.pic_area_full{position:absolute; top: 0; left:0; z-index: 10}
.apoco_slideshow ul.carousel{padding: 0; margin: 0;position:relative;}
.apoco_slideshow ul.carousel li{position: absolute; top: 0; left:0;
                                height:inherit; overflow:hidden;visibility:"hidden"}
.apoco_slideshow ul.carousel li div{
    width: 100%;
    height: 60px;
}
.apoco_slideshow ul.carousel li div p{
    text-align: center;
    width: inherit;
    margin: auto;
    position: absolute;
    bottom:0px; }
.apoco_slideshow ul.carousel li.slide > h1{width:inherit; height: inherit; text-align:center;}
.apoco_slideshow span.carousel_left {position: absolute; z-index: 10; background: url("images/carousel_left.png") no-repeat #aaa; width: 48px; height: 48px; margin-left: 1em; top: 50%;left:0px; opacity:0 }
.apoco_slideshow span.carousel_right{position: absolute; z-index: 10; background: url("images/carousel_right.png") no-repeat #aaa; width: 48px; height: 48px;margin-right: 1em; top: 50%; right: 0px; opacity:0}
.apoco_slideshow span.carousel_left:hover{opacity: 1}
.apoco_slideshow span.carousel_right:hover{opacity: 1}
.apoco_slideshow span.hover{background-color:#555; opacity: 0.5 }
.apoco_slideshow div.slideshow_controls{position: relative; width: 140px; margin: 0 auto;z-index:11;display: block }
.apoco_slideshow div.slideshow_controls ul{display:table-cell; list-style-type: none;
                                           padding:0;}
.apoco_slideshow div.slideshow_controls li{width: 24px;
                                            cursor: pointer;
                                            float: left;
                                            list-style: outside none none;
                                            margin: 2px;
                                            padding: 4px 0;
                                            position: relative;}
.apoco_slideshow div.slideshow_controls span{float:left; margin: 0 4px;}

/* tabs */
.apoco_tabs ul {margin: 0; padding:0}
.apoco_tabs li{ height: 2em ; cursor: pointer;cursor:hand;  }
.apoco_tabs li span{ height: 2em; padding: 0em 1em; text-align: center; }
.apoco_tabs li:hover{color: #4466ff;}
.apoco_tabs li.selected{font-weight:bolder;}

/* menus */
.apoco_menu {padding: 1em 0;}
.apoco_menu li{cursor:pointer; line-height: 1.4;}
.apoco_menu span{font-weight: bolder;}
.apoco_menu ul{margin: 1em 0 0 0; padding: 0}
.apoco_menu ul li:not(.seperator):hover{color: #4466ff }
.apoco_menu ul li.seperator{ border-top: 1px solid;
                             margin-top: 1em;
                             padding: 1em 0;}
.apoco_menu ul li span.seperator{}

.popup { position: absolute; width: 40em; height: 14em; z-index: 1000; background: #101010 }

#grid_popup{ }
#grid_popup textarea{  width: 40em; height: 10em; }
/* default for tables */

/* grid table */



.apoco_grid {
    min-width: 4em;
    font-size: 10pt;
    box-sizing: border-box;
    margin: 0 2em 4em 2em;
} 
.apoco_grid .label{
    margin: 1em 0 1em 1em;
    display: table-row;
}
.grid_content {
    min-width: 8em;
    min-height: 6em;
}
.grid_footer {
    height: 3em;
    margin-top: 2em;
} 
.grid_footer div{
    background-color: #888;
}
.apoco_grid button{
    height: 2em;
}  
.apoco_grid table{
    min-width: 8em;
}

.apoco_grid table {
    table-layout: fixed;
    border-collapse: collapse;
}


.apoco_grid div.head{
    z-index: 100;
    background-color:#ddd;
    top: 3em;
    height: 3em;
    overflow: hidden;

}
.apoco_grid div.head > div{
    display: inline-table;
    height: inherit;
    text-align: center;
}

.apoco_grid div.head > div,
.apoco_grid table td{
    overflow:hidden;
    min-width: 3em !important;
    margin: 0;
    padding: 8px;
}
.apoco_grid div.head div.arrows{
    display: inline;
    height: 32px;
    float:right;
    width: 16px;
    padding: 0;
    margin-top:-8px;
}

.apoco_grid div.head div.arrows span{
    height: 16px;
    width: 16px;
    display:block;
}

.up:before{ content:"\25B2";}
.down:before{content:"\25BC";}

.apoco_grid table tr{
    height: 3em !important;
    overflow: hidden;
}
.apoco_grid table td {
    height: inherit;
    overflow: hidden;
    font-weight:normal;
    text-align: right;
}
.apoco_grid table td label{
    display: none;
}

.apoco_grid table th span{
    display: inline-block;
    float: right;
    margin-left: 1em;
}



/* table with only col names */
.apoco_grid .inner_table h4{ padding-left: 1em; height: 1.5em; color: #0000ff}
.apoco_grid .inner_table table{ height: 100% }
.apoco_grid .inner_table table td.cell_updated{background: #fbec88}
.apoco_grid .inner_table table td.cell_updated_fast{background: #fb8866}
.apoco_grid table td input {box-sizing: border-box; font-size: inherit; overflow: hidden}
.apoco_grid .inner_table table td input{ background: inherit; text-align: inherit; margin: 0;padding:0}
.apoco_grid .inner_table table td th { word-wrap: break-word}
/* set the row colours */
.apoco_grid .inner_table table tr:nth-child(even){ background: #ffffd3}
.apoco_grid .inner_table table tr:nth-child(odd){ background: #ffffff}
/* ddeeff */
.apoco_grid .arrows span{height: 50%; width: 16px}


/* padding: top right bottom left */
input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}


.first{width: 2em }
.slider{width: 15em; margin:  0.5em 0 0.5em 0} 
.integer {width: 5em }
.integer input{width: 4.5em}
.positiveInteger {width: 5em}
.positiveInteger input{width: 4.5em}
.negativeInteger {width: 5em}
.negativeInteger input {width: 4.5em}
.date {width: 8em;}
.date input {width: 7.5em;}
.time {width: 8em;}
.time input {width: 7.5em;}
.string {width: 6em }
.password{width: 7em}
.password input{width: 6.5em}
.string input{width: 5.5em}
.token {width: 6em }
.token input{width: 5.5em }
.alphaNum {width: 6em }
.alphaNum input{width: 5.5em }
.image {width: 10em }
.currency {width: 8em}
.currency input{width: 7.5em}
.email {width: 8em }
.email input{width: 7.5em }
.float {width: 8em}
/*.container {width: 10em}*/

.integerArray input{width: 4.5em}
.integerArray span.integerArray{width: 3.5em}
.floatArray {width: 12em}
.boolean {width: 4em;}
.boolean label{ margin-left: 1em;}

.imageArray{display:block;margin-top:1em; margin-bottom: 1em}
.thumbnails{margin-top: 1em}
.thumbnails div{display:inline}
.thumbnails img{width: inherit; height:inherit; border: 2px solid #999}

.check_box{width: 16px; height: 16px}

.stringArray li.plus{float: right; margin-left: .4em; border: 1px solid #000 }
.stringArray li.minus{float: right; margin-left: .4em; border: 1px solid #000 }

div.apoco_autocomplete{position:relative;width:20em}
div.apoco_autocomplete ul{z-index:10; padding: 0; margin: 0em; position:absolute;top:1.5em; background-color: #fff}
div.apoco_autocomplete ul li{display: block; 
                             z-index:10; width: inherit}
div.apoco_autocomplete ul li:hover{font-weight:bold}
div.apoco_autocomplete input{margin: 0; width: 18em;}
div.apoco_autocomplete span{width: 20px; height: 17px; float:right;
                            padding: 0 0.5em;
                           background-color:#fff}
ul.choice {list-style-type: none; width: 10em }
ul.choice li{display: block}
ul.choice li input{float: left}

.float ul.aligned_float{display: flex; 
                        list-style-type: none;
                        border: 1px solid #333333;
                        box-sizing: border-box;
                        border-collapse: collapse;
                        width: 8em; height: 100%; 
                        margin: 0em; padding: 0em; flex-flow: row}

.float ul.aligned_float li{ display: flex; flex-flow: row}

.float ul.aligned_float li input{ border: 0 none}

.float ul.aligned_float li div.values .float_right,
td span.float_right{ float: right; text-align:left; width: 50%}
.float ul.aligned_float li div.values .float_left,
td span.float_left{ float: left; text-align:right; width: 50% }

.float ul.aligned_float div.arrows{display:flex;
                                   flex-flow: column;
                                   background-color: #ffffff;
                                   height: inherit}
float ul.aligned_float div.arrows span{height: 50%} 

.float ul.aligned_float div.values{ display:flex; 
                                   flex-flow: row; } 

textarea{min-width: 30em;
         width: 80%;
         min-height:8em;
         margin: 1em 0 1em 0}

ul{list-style-type: none;}

.disabled{ 
    pointer-events:none; 
    opacity:0.6;         
 }  /* use <div class='disabled'></div> $(.disabled).show() or .hide()  */

#Apoco_modal {
    position: fixed; /* Stay in place */
    z-index: 900; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    line-height: normal;
    background-color: rgb(0,0,0);
    background-color: rgba(255,255,255,0.25);
   
}


/* for error messages etc */
.apoco_dialog{
    position: fixed;
    top: 50%;
    left: 20%;
    z-index: 1000;
    min-width: 20em;  /*height: 12em;*/
    border:1px solid black;
    background-color:#fff;}

.apoco_dialog div.titlebar{
    height: 2em;
    color: black;
    font-weight:bold;
    background-color:#eee;
    border-bottom: 1px solid;}

.apoco_dialog div.titlebar>span{
    margin-left: 1em;
}
.apoco_dialog div.titlebar button{
    float:right;
    font-size: 16px;
    margin: 0;
    padding:0;}

.apoco_dialog div.titlebar button span{
    width:16px;
    height:16px;
}
.apoco_dialog div div button{
    float:right;
    margin: 0 15px 15px 0;
}
.apoco_dialog div.message{
    text-align: center;
    min-height: 10em;
    max-width: 20em;
    width: inherit;
    overflow:auto;}

.apoco_dialog div.message p{
    width: inherit;
    margin: 1em;
    word-wrap: break-word;
}


#apoco_datepicker{
    display: block;
    left: 36px;
    position: absolute;
    top: 32px;
    z-index: 20;
    border: 1px solid;
    background-color: #ffffff;
}
#apoco_datepicker td.Apoco_date{
    cursor: pointer;
}
#apoco_datepicker_title{
    color: #222;
}
#apoco_datepicker td{
    text-align:center;
}
#apoco_datepicker_controls{
    width: 100%;
    border-bottom: 1px solid;
    background-color: #eee;
}
#apoco_datepicker_controls td.arrows{
    display: block;
    height: 16px; /* in pixels because icons are 2 X 16px plus margin */
    width: 32px;
    margin-left: 0.2em;
    margin-right: 0.2em;
}
#apoco_datepicker_controls td.arrows span{
    padding: 0;
    cursor: pointer;
    height: 16px;
    font-size: 16px;
    width:16px;
}
#apoco_datepicker_grid td.apoco_date:hover{
    border: 1px solid #aaa;
    cursor: pointer;
}



#apoco_alert{background-color: #bb0000; color: #ffffff; border: 2px solid orange; padding: 1em;
             width: 20em;min-height: 4em;margin: auto; z-index: 100; position: absolute; top: 50%;left: 50%}
#apoco_alert span{width: inherit; margin-top: 1em;
                  font-weight: bolder;
                  padding-left: 1em;}
#apoco_alert .alert{height: 2em; position: relative}
#apoco_alert .alert_msg{position: relative}

#apoco_trouble{position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.5;  background-color: #800; padding: 30px; z-index: 100}
#apoco_trouble h1{font-size: 70pt; position: fixed; top: 20%; left: 30%;  margin: auto; color: #fff ; background-color: inherit; opacity:1.0}
#apoco_trouble h2{position:fixed;font-size: 50pt; color: #fff; top: 33%; left:30%; margin:auto; opacity: 1.0}

#apoco_spinner
{ position: fixed;
  top: 50%;
  left: 50%;
  margin: auto;
  z-index: 400;
  background: transparent url('images/ajax-loader.gif');
  width: 32px;
  height: 32px;
}

.apoco_clock{border: 1px solid ;border-color: inherit; padding: 0.5em; width: 7em; margin-top:1em}


.doing_things{cursor: wait;}

.inline{ display: inline;}


.hidden{ visibility: hidden}

.tooltip{ } 

.bold{font-weight: bold; color: #cccccc}
.red{background: #aa0000; color: #fff}
.yellow{background: #fbec88}
.orange{background: #fb8866}
.smallgap {position: relative; margin-top: 2em;}
.mediumgap {position: relative; margin-top: 4em;}
.biggap {position: relative; margin-top: 6em;}
.hugegap{position: relative; margin-top: 12em;}

.required{border: 1px solid #dd2222}