/*============================================
	use this file to FOLLOW / OVERWRITE ashton_styles.css
    ie don't duplicate styles from ashton_original
    Was current at Dec 22 pre mods
    This is a reduced set of styles from tymos styles.css (59k)
*/

:root {  --root-background-color: #AAf ;			/* #444*/
         --root-font-color: #3080D0;
		 --root-label-color: #666; 
}

/*===============================================
    OVERRIDES - override settings in app.css
=================================================*/
h1 { font-size:2em;  margin-top:10px; margin-bottom:10px;  }
h2.invoice { display: block;   font-size: 1.5em; font-weight: bold;
    margin:0; 
}
a  { text-decoration: none;	}
ul { list-style-type: none;}
p, ul, ol { margin-bottom: 2px; }  /* override app.css 5993 1.5em */
table { border-collapse: separate; border-spacing:1px; }    /* app LL 180 */
.ta-c { text-align:center;}
div.ta-rt { text-align:right;}
div.flo-rt { float:right;}

 
    /* Override the app.css:1060 body Font-family as Arial is larger */
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-family: Arial, Calibri, sans-serif;
  font-weight: 700; 
  color:var(--root-label-color);
  }

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 21px;
    font-size: 22.5px;
    line-height: inherit;
    color: #333333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
    /* used by login box */
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05)
}

	/* empty div to stop action buttons turning up below the foot */
div.page_footer { padding:50px; }

/* can't fix Chrome black border...
   input:focus { border: 1px solid red; }
   .form-ipa:focus { border: 1px solid red;}
*/

/* ========== re Flash Messages ======================= */
.alert {
	position: relative;
	padding: 0.75rem 1.25rem;
	margin - bottom: 1rem;
	border: 0 solid transparent
}
.alert-success  {
	background-color: limegreen;
}
.alert-error, .alert-failure {
	background-color: tomato;
}



.visible {
  visibility: visible;
  opacity: 1;
  overflow:none;
  transition: opacity 2s linear;
}
.fade-out {
  visibility: hidden;
  opacity: 0;
  overflow:hidden; 
  transition: visibility 0s 2s, opacity 2s linear;
}
.fade {
	-webkit - transition: opacity 1.15s linear;
	transition: opacity 1.15s linear
 }
	
.alert - link {
	font - weight: 700
}
.alert - dismissible {
	padding - right: 3.90625rem
}
.alert - dismissible.close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.75rem 1.25rem;
	color: inherit
}


/*===========================================================

    NAVIGATION / TOP MENU 

    LIST ITEMS - MENUS   HREFS - SPECIFIC TO TOPMENU

=================================================*/

.navbar { height:75px; margin-bottom:10px; color:white; }
.navbar-version {
    float: left;     padding: 14.5px 15px; 
    font-size: 19px;
    line-height: 21px;
}
.navbar-version a { text-decoration: none; color:#333;}

.navbar-main {    padding-top:10px; padding-left:10px;padding-bottom:10px;}


ul.navlist {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
ul.navlist  div.title_1   { min-width:5em; }
ul.navlist  a            { font-weight: bold; 	text-decoration: none;	}
  


div.hamburger { display:none; }
ul.v-nav { 
        display:none;
        position:relative;
        background:white; 
        width:200px;
        border-radius: 8px;
        padding-left:20px; 
        z-index:100; 
        }
ul.v-nav > li { padding:10px; 
                color: var(--root-font-color);
                font-size : 20px;      
                font-weight: 800; 
}
ul.v-nav > li >div {}        

@media screen and (max-width : 768px ) { 
    div.navbar-version { display: none;}
    div.navbar-main  { display: none;}
	div.hamburger    { display: block; padding-top:20px; margin-left:20px;}
    div.hamburger:hover ul.v-nav { display:block;}
}

    /* override App.css LL 3165  to maintain blue color set in ashton_styles.css */
.dropdown-menu > li > a { color: var(--root-font-color); }

#topmenu>ul  {  margin:0px; border: 1px dotted red; padding:0;  list-style-type: none; }

div.ulend { float:left; width:1em; height:98%; border:1px solid #66C; }

  

ul.navlist > li {	/* without a width here the width of the li children makes the Firs Row list "fan out" */
    display:inline-block;   /* was float:left */
    position:relative;      /* need for absolute following */
    margin:2px; 
    padding-left:0;
    /* background-color: var(--root-background-color);*/
    list-style-type: none;
    cursor: default;
}

ul.navlist > li > div > a   {
        display:block;
        border: 1px solid black;
        border-radius: 12px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 10px; padding-right:10px;
        font-size : 20px;
		background-color: #EEE; 
        transition-property:  background-color; 
        transition-duration: 500ms;
    }

 /* this covers all of the descenders */
ul.navlist li:hover ul,
       li.over ul {
    display: block;
}
ul.navlist > li  a:hover {
    color: var(--root-font-color);
    background-color:white;
   }

    /* for sidelines - ONLY put them on the li elements */
ul.navlist li>ul {
    display: none;          /* <<<< TODO display:none   Needs revert to none  */
    position: absolute;     /* essential else background depth increases to depth of drops */
    top: 100%;
    left:0;
    padding-left:0;         /* Essential to avoid DEFAULT VALUE  */
    z-index:100;
        /* #2c3e350yellow to see what's going on */
}
    /*ul.navlist li>ul  li {    .. too damn confusing*/
ul.level2  li {
    width: 9em;                 /*   adjust to suit width of menu 2nd level items  */
    text-align: left;
    padding-left:0.4em;
    padding-top: 0.8em;
    font-size:18px;
    background-color: var(--root-background-color); ;
}
li.last { padding-bottom: 0.5em; }

/* ul.level2 li > a   { font-size:1.0em; } */

.level2  li.first { padding-top:1.0em; }
.level2  li.last {
    border-bottom:  solid 1px yellow;      /* #336 close the box on the last one */
    padding-bottom:1.0em;
    border-bottom-left-radius : 12px;
    border-bottom-right-radius : 12px;
}

 
    /* Two-Column Submenu:
        use absolute on the wrapper sbs_menu  stop it occuying space;
       then for 2col the first is class=ul.nav_m2 and for the second, just use "sbs" which is display:inline-block
       TODO background-color to ensure we can see the submenu over the body colour
       Not works:div.tooly  { background: linear-gradient( #444, #888  ); }
       */
ul.navlist li> div >a:hover div.sbs_menu {
    display:flex;
    }


/* ======================================================================= */

   
    /* use display:none to get the subment to start working; block to set it up */
ul.nav_m2 {  display:none;         /* <<<< */
              padding-left:0.4em;
        }

ul.nav_m2>li {  width:auto;
                padding-top: 0.8em;
            }      /* got to override the former value of 4.5em /* with grayer (lighter) background make font darker */
ul.nav_m2>li a { color :  var(--root-font-color);
                 font-size : 18px;
                }

 /* !! Can't use border:1px solid whit e; because when its collapsed
        the nil content leaves a 1px dot */
.sbs_menu { display:flex;
            width:18em;
            /* padding-top:0.8em; on Edge gives a rounded bottom bulge esp. when closed */
            background-color : #444; position:absolute;
            border-bottom-left-radius : 12px;
            border-bottom-right-radius : 12px;
            z-index:100;
        }
.sbs_menu_c1 { flex:1; }
.sbs_menu_c2 { flex:1; }


/*===============================================
    PAGE STRUCTURE
     box-sizing: border-box; is on by default *{setting} app.css: 1045
=================================================*/
        /* overrides app.css:6030 */
header { margin-bottom:0px; }


div.body_lhs {  flex: none;
                width: 200px;
                padding: 5px;
}


div.body_central {
    margin-left:5px;
    padding-left:5px;
    border-right: 0.0em solid #999;
}
div.body_central.3col { width:600px; border: 1px solid green; }

div.body_rhs {
}

div.body_lhs.choice_list { width: 200px; border:1px solid #FCC; border-radius:8px;  }
    /* space off & down for emailController student ref list */

.mo_option_header {  
            border:1px solid #ACA;
			 background: #CFC; 
			border-radius:8px; 
			font-size:16px; 
			font-weight:700;
			text-align:center;
			margin-bottom:10px; 
			}

.mo_option_title {  border:2px solid #ACA;
		border-radius:8px; 
		padding:10px;
}

div.option_item { 
	border-bottom:2px solid #ccc; 
	padding-top:20px; padding-bottom:18px; 
	background:#FAFAFF;
	cursor:pointer;
	}



    /* use in Student edit with hidden blocks */
.w100       { width: 100px; }
.w200       { width: 200px; }
.w250       { width: 250px; }
.w300       { width: 300px; }
.w500       { width: 500px; }
.w560       { width: 560px; }
.w600       { width: 600px; }
.w650       { width: 650px; }

.w30pc      {width:30%;  }
.w40pc      {width:40%;  }
.w75pc      {width:75%;  }
.w80pc      {width:80%;  }
.w100pc     {width:100%; }


div.body-2col { display:flex;
                flex-direction:row;
                flex-basis : auto;
				column-gap:2em;	
                }
				
div.flex-col { display:flex;
                flex-direction:row;
                flex-basis : auto; }
div.flex-1     {flex:1;}
div.flex-2     {flex:2;}
div.flex-3     {flex:3;}
div.flex-4     {flex:4;}

div.valign-c { vertical-align:middle}

div.flex .cola { flex:1 }

.mar-t-10  {margin-top: 10px; }
.mar-l-10  {margin-left: 10px; }
.pad-a20   {padding-left:20px; }
.pad-t-5   {padding-top: 5px;  }
.pad-t-20  {padding-top: 20px;  }
.pad-tb-5  {padding-top: 5px; padding-bottom:5px; }
.pad-tb-10 {padding-top: 10px; padding-bottom:10px; }
.pad-tb-20 {padding-top: 20px; padding-bottom:20px; }
.pad-t-10  {padding-top:10px; }
.pad-b-10  {padding-bottom:10px; }
.pad-l-20  {padding-left:20px; }
.pad-lr-5  {padding-left:5px; padding-right:5px; }
.pad-lr-10 {padding-left:10px; padding-right:10px; }
.pad-r-10  {padding-right:10px; }
.pad-r-20  {padding-right:20px; }
.pad-r-30  {padding-right:30px; }
.empty_table { width:100%; padding:30px; font-size:18px; font-weight:800;}

div.abs-tr-pad20 { position:absolute; top:0; right:0px;
                   padding-right:20px
    }

div.actions-p10 { padding:10px; }
div.row{ margin: 0px; } /* override negative margins from app.css:1534 */

div.tables_container{  height: 500px;  border: 0px dotted green;  }
div.vspacer4 { margin-top:40px;}

div.options_title { font-size: 18px; font-weight:900; padding-bottom:5px; }
div.menu_options {  width: 120px;    }  /* border-right:1px solid gray; */
div.menu_options > div { padding: 5px  0;  }

    /* override ashton_styles css 436 */
div.action_menu { margin:0px; }

/* ===== IMPORT - substituting tables for divs ==========*/
div.inline { display:inline-block; }
div.import-select-c1 { width:140px;  }
div.import-select-c2 { width:160px;  }
div.import-select-c3 { width:150px;  }

    /* colgroup width is deprecated  */
table.school_show col.col_1 { width:150px; }
table.school_show col.col_2 { width:300px; }

/* set defaults for e.g. table.course_show  */
col.col_0 { width:100px; }  /* add for "delete" col on import tables */
col.col_1 { width:150px; }
col.col_2 { width:250px; }
col.col_3 { width:100px; }
col.col_4 { width:100px; }
col.col_5 { width: 60px; }
col.col_6 { width:100px; }
col.col_active { width: 60px; } /* for additional column to display "active" indicator */

table.student_show col.col_1 { width:150px; }   /* student ref */
table.student_show col.col_2 { width:200px; }   /* surname  */
table.student_show col.col_3 { width:200px; }   /* parent name  */
table.student_show col.col_4 { width:150px; }   /* course ref */
table.student_show col.col_5 { width:60px; }   /* parent name  */

    /* now referenced by import_template_multiedit.html.twig */
colgroup.import_template_lines col.col_1 { width:150px; }   /* Field Name */
colgroup.import_template_lines col.col_2 { width:140px; }   /* Field Type   */
colgroup.import_template_lines col.col_3 { width:80px; }   /* length  */
colgroup.import_template_lines col.col_4 { width:150px; }   /* Yr Sequence */
colgroup.import_template_lines col.col_5 { width:150px; }   /* Yr Column Name  */

colgroup.license_list col.col_1 { width:120px; }   /* License no */
colgroup.license_list col.col_2 { width:150px; }   /* License Key  */
colgroup.license_list col.col_3 { width:120px; }   /* PO No  */
colgroup.license_list col.col_4 { width:150px; }   /* Received On */
colgroup.license_list col.col_5 { width:100px; }   /* Issued to */

    /* 2020 Try different System : send array of numbers to Twig  */
.c40  { width: 40px; }
.c60  { width: 60px; }
.c80  { width: 80px; }
.c100 { width:100px; }
.c110 { width:110px; }
.c120 { width:120px; }
.c130 { width:130px; }
.c140 { width:140px; }
.c150 { width:150px; }
.c160 { width:160px; }
.c180 { width:180px; }
.c200 { width:200px; }
.c240 { width:240px; }
.c250 { width:250px; }
.c280 { width:280px; }
.c300 { width:300px; }
.c320 { width:320px; }
.c325 { width:325px; }
.c350 { width:350px; }
.c375 { width:375px; }
.c400 { width:400px; }
.c500 { width:500px; }


/*===============================================
    PAGE STRUCTURE - LEFT SIDE  BLOCK
=================================================*/

div.lhs_header { margin:20px; margin-bottom:30px; }
div.lhs_title { }

div.lhs_list_box { 
	height:500px; 
	overflow-y:auto;
}


/*===============================================
    PAGE STRUCTURE - RHS BLOCK
=================================================*/

div.body_rhs.reference_list { margin-top:85px; padding-left:10px; }

div.body_rhs.contacts { width:250px; padding:10px 25px; 
	border:1px solid #ccf; 
	border-radius:5px; 
	}

div.rhs_options       .mo_option_body { display:none;}
div.rhs_options:hover .mo_option_body { display:block;}

div.registration-list { padding-left:40px;padding-top:20px;}

/* ===================================================== */

.container {
    margin-right: auto;
    margin-left: auto;
}
.container > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-header, .container-fluid > .navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}

/* ========================================== */

.booking-header { margin-left:15px; padding:20px; font-size:1.2em;}



.admin_icon { position:absolute;  right:120px; top:20px;  }

.admin_image { width:40px; height:40px;  }


    /* action buttons on concertina divs, when open are getting shoved down (subducted!)
       into the footer which is blocking mouse actions. Z-index fastest way to stop it
       */
footer { z-index: -100;}




        /* substitute for Webpack/Encore style substitution on form synthesise the "small" class */
div.form-group p.help-text { font-size: 85%; color:#999; }

#import_menu ul  {  margin:10px; border:  0px solid red; padding:10px;  list-style-type: none; }		/*  list-style-type: none;  margin:0; */

            /* force labels to be above input boxes on student edit */
div.block-label {  display:block; font:bold 16px Arial, Calibri; color:var(--root-label-color);}
        }
            /* issues on consolidating display/edit templates: label is bottom-aligned :-( */
.label-v2 { font-size: 18px; font-weight: bold; font-family: Arial, Calibri, sans-serif;
        margin-top:5px; }

div.page_title { padding-bottom:10px; ;  }
span.page_title_font { font-size: 18px;   font-weight: bold;  }
span.reference  { font-size: 18px;   font-weight: bold;  }
span.font_bp1   { font-size: 16px;   font-weight: bold;  }

.table-wrap-font     { font-size: 18px;  }

                    /* Field Edit Help texts > input boxes!!!
                       hit this p,ul,ol on app.css :5993 - reduce font size 19 -> 14; */
.sbs > p { font-size: 15px; }
                    /*Also input box fontsize are too small at 15px;       */
.sbs > .form-control { font-size: 17px; }

div#menu_wrap { float:left;}

    /* centralise "delete" icon in table headers */
th > img  { display: block; margin:auto; }
td.nodisplay {display:none;}
    /* hr is defined in app.css 1115 was e6e6e6;*/
hr {
    margin-top: 16px;
    margin-bottom: 16px;
    border: 0;
    border-top: 2px solid #ccc
}

    /* from app.css 2322 height: 43px; padding 10px 18px; font 15px*/
.form-control {
  display: block;
  width: 100%;
  height: 32px;
  padding: 4px 16px;
  font-size: 14px;
  line-height: 1.42857;
  color: #333333;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
  .form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
  .form-control::-moz-placeholder {
    color: #999999;
    opacity: 1; }
  .form-control:-ms-input-placeholder {
    color: #999999; }
  .form-control::-webkit-input-placeholder {
    color: #999999; }
  .form-control::-ms-expand {
    background-color: transparent;
    border: 0; }
  /*.form-control[disabled], .form-control[readonly],*/

.form-ipa {  display: block; border: 1px solid #ccc; }
.ip-border {  border: 1px solid #ccc; }


select[multiple], select[size] {
    height: auto;
}


.src_student { border: 1px solid #3F3; }    /* on registration forms indicate student-sourced inputs */



/*===============================================
    AJAX LAMPS / TRAFFIC LIGHTS / SPECIFIC WARNINGS
=================================================*/

#ajax_lamps { position:absolute; top:100px; right:2em;  }

    /* course/registration/XXXX-20nn.nn - no manager set */
span.no_manager_css,
span.no_manager_css >a { font-weight:bold; font-size:1.5em; color:red; }

div.todo_list { position:absolute;
                top:4px;right:30px;
                width:25px;height:50px;
                border:1px solid #c0c0c0;
                padding-right:4px;
                border-radius : 12px;
    }
a.todo:hover { color:black; text-decoration:none;}
.circle_red {   display: inline-block;
        width:24px; height:24px;
        border-radius : 50%;
        color:white;
        background-color: red;
        padding-left:2px;
    }
.circle_red .circle_green{   background-color: green;   }


/*=================================================================
    AUTOCOMPLETE input boxes / tymos_autocomplete.js
    wid: was droplist:100, shado:102
    structure is
     <div class="autocomp_shadow" id="autocomp_shadow">
        <div class="autocomp_droplist" id="autocomp_droplist"></div>
    </div>
    NB fn.. 42_autoClass::onFocus sets the *position* of the shadow
    so we draw the shadow first as #555; try changing top to 24px not 2px
    and switch to em based on 1em=12pt=16px
    top: 2.2em not work
=============================================================*/
.autocomp_wrap {
	position:relative;
	top: 0;     
	left: 0;   
}

.autocomp_droplist {
	position:absolute;
	left: 0.125em;      /*2px;*/
	visibility:hidden;
	
	width: 9.8em;   /*150px;*/
	padding-left: 0.2em;    /*3px; */
	padding-top: 0.2em;     /*3px;*/
	border: 1px solid #000000;
	background: #fff;
    max-height: 20em;        	/* ! Of course Max-height */
    z-index:50;                    /* try#3 */
    overflow:auto;
	box-shadow: 4px 4px 2px #666;	/* TRY1 */
}

.autocomp_droplist div.wide {
    width:    200px; 
    font-size: 0.875em;
    } 


/*===================================
            COURSE - COPY
=====================================*/

.XXcopy-course_div { width:100px; }

/* ===================================
    DIALOG - Editing 
 ===================================== */
 	/* managing the mouse-over edit functionality */
.contact_holder { width:100%; }	
.block_intro { position:relative; }
.block_edit {position:absolute; right:40px; visibility:hidden; }
.block_edit_tar { 	position:absolute; 
				visibility:hidden;
				width:20px; 
				right:15px; 
			}
.block_intro:hover .block_edit { visibility:visible; }			
.block_intro:hover .block_edit_tar { visibility:visible; }			
	
.icon_relation_edit { width:32px; height:32px; right:15px; }

.mini_comment { font-size:0.8em; width:80%; cursor:pointer;}
.mini_comment .decor:hover  { 	text-decoration:underline; 	text-decoration-color:red;}; 			


/* =============   DIVS - DIALOG   / UPDATE NOTICES  ===================

                    FORM  ELEMENTS   BUTTONS
					
========================================================================*/

/*	Used for the footer in dbgen_display div id=action_menu
	margin-top:20px;   margin-left:   1px;  */

div.action_menu {
        position: relative;     /* prepare for update._notice being absolutely positioned */
        height:2em;          clear: left;
        margin:0.4em;
        margin-top:2em;
        padding: 1px;
     }

div.edit_new_password {    
    width:400px;
    margin:20px 0 20px 0; 
}
     
                /* or don't bother to float it left; just relative it off; was 200/-30
				xx if we make it absolute, then two of these will end up on top of each other
                14.1010 change to divs else block-level elements <p> screw it up */
div.update_notice {
        position:fixed; left : 300px; top:150px;
            /* borrow rest from tooltip */
        width: 24em;
        border: 1px solid #CCC;
        padding: 5px;
        background-color: #EEC; /* ; EEEEEE99*/
        visibility: hidden;        /* xx only display if we've got content start Hidden; if has contents, set visible then  then fade to hidden */
        z-index:200;        /* 14.0923 for BudgetWorkflowLines its appearing behind the table */
 }
	/* if we want to repeat this, have to give it a different class */
div.update_notice.no2 { position:relative; left : 300px; top:-50px; }

div.dialog {
        position: absolute;  left : 300px; top:200px;
         width:300px;
        border: 2px solid #CCC;
        padding: 5px;
        background-color: #EEC; /* ; EEEEEE99*/
        min-height:6em;
        z-index:20; 
        /* opacity: 0.9;    */
 }
div.dialog.dlgWarning {  position: absolute;  left : 600px; margin-left:20px; 
        border:0px; padding:20px; 
        background-color: transparent; 
        z-index:-10;    /* 2015.04 make sure its BEHIND the list of customisable table columns */
}         

div.dialog.move { cursor : move;}


    /* 2014.05 reinstate padding: this is in the (b/fwd) user agent stylesheet but gets knocked out by the "Myers-isation"  above 
       button was on app LL2788  */
input.subbutton,
   button.subbutton {
    margin:  0 2px; 
	border:0;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow:               rgba(0,0,0,0.3) 1px 2px 1px;
    background: linear-gradient( #aac, #cce  );
    font-size: 1.066em; 
}

input.subbutton.sml { font-size:0.75em; }
button.invoice  { font-size:0.75em; }
   
input.subbutton:hover,
   button.subbutton:hover {   background: linear-gradient( #6c8, #6e8  ); }
button.button-offset   { margin-left:100px; } 

input.subbutton.dialog {  margin-left:20px;  }
div.btn_tar { float:right; text-align:right; }  /* border:0px solid red;*/

    /* from newjob.tpl */
input.autocomp { autocomplete:off; }          	/* err this is html, not valid css FIX */

		/*	FORM printform - printable subform to eliminate LHS menu etc.  */
form.printform	{   	display:block; 	clear:left;               }



/*==============================================
        DRAGGABLE LICENSES
==================================================*/

td.drag_source { cursor:default; }
td.drag_source:hover { cursor:grab; }

    /* when dragging onto droppables, highlight the destination cell
       quoted in tymos_draggable.js */
input.droppable.borderHighlight { border: 1px solid blue;}

    /* in ashton_styles, original was div.scrollholder_class.D500 { height:500px; } */
div.D500_OFLOW { height:500px; overflow-y:scroll;}

div.dragClone {
    display:block;
    position: absolute;
    border: 4px solid #CCC;

}




/*===================================

            FROM TWIG FORMS

=====================================*/

.box-c1 { flex-basis:200px; }
.box-c2 { flex-basis:auto; }

.sbs { display:inline-block; }  /* float:left; */
.wid-c1      { width : 30%; vertical-align:top; }
.wid-c1-w    { width : 45%;  }
.wid-c1-p { width: 30%; padding-left:20px; }

.wid-c2   { width: 60%; padding-left:20px; }
.wid-c2-w { width: 45%; padding-left:20px; }
.sbs-ip   { float:right; padding-right:20px; }  /* inputs in 2-col need Rt-adj but inset from rhs */

.wid-c1-50  { width : 60px;  }
.wid-c1-80  { width : 80px;  }
.wid-c1-100 { width : 100px;  }
.wid-c1-200 { width : 200px;  }
.wid-c3-min2 { min-width : 200px;  }
.wid-c2-min3  { min-width : 300px;  }
.wid-c2-500  { min-width : 500px;  }



label.required:after {
    content: " *";
}

    /* Bloody form-control had display:block so delete that and add in the other parts of it
       2020.0228 width 200  no good for edit display; needs 100% */
input.dpick   { width: 100%;
                display: inline;
                font-size: 15px; line-height: 1.42857; }

/* input.dpick>a.date-picker-control { position: absolute; top:0, left:20px; }  */
.ip-date { position:relative; }
.ip-date a.date-picker-control { margin-left: -20px; }

span.checkbox-a { width:150px; float:left}
span.checkbox-b { width:80px; float:right}
input[checkbox].sq16,
   .checkbox.sq16  { width:16px; height:16px; margin:auto; }
input[checkbox].sq25,
   .checkbox.sq25  { width:25px; height:25px; margin:auto; }
.cb_valign  { vertical-align:middle }


/* =============   DIVS - DIALOG / HELP / UPDATE NOTICES  =====================

                    FORM  ELEMENTS   BUTTONS
*/
    /* leave these in for time being; used in page_import_base.tpl at least*/
.tableHidden {visibility:hidden; display:none; clear:left;}
.tableShowing { visibility:visible; 	}


div.user_help_text { max-width:80%;
			margin-left:10px; 
			border : 1px solid #aaa;
			position:relative;
}
div.help_text_box { white-space: normal; overflow:auto; }
div.user_help_turnoff { position:absolute; top: -0.66em; right: -0.75em;  }
div.user_help_turnoff  img { width:16px; height:16px;  }
img.blackCross { width:32px; height:32px}

   /* modifiers for help-text widths */
.W600 { max-width:600px;}
.W800 { max-width:800px;}

div#jsDebug { float:left; width:600px;}    /* normally flo.at:left; */
div#jsDebug.footer { position:absolute; bottom:30px; }

div#user_message_div { clear:left;  margin-left:10px; } /* needs clear:left bec R2C2 is now a flo.at */

/*==============================================
        DISCLOSABLE OPTIONS BLOCK
==================================================*/

        /* job setup drop-down options margin-left:16px; take out  width:500px; - use .w500 instead*/
		
div.toggle_options_hdr {  margin-top:10px;
            border:1px solid #CCD; background: #EEF; }
div.toggle_options_hdr.login {   width:90%; }            
div.toggle_options_hdr.docc {  width:400px; }       /* 14.1226 not float left */
div.toggle_options_hdr.paracc {  width:160px;  }
div.toggle_options_hdr.wysed  {  width:200px;  }
div.toggle_options_hdr.colselect {  width:210px;  } /* clients p0 column select */
div.toggle_options_hdr.billing {  width:100%;  }                /* clients p0 column select */
div.toggle_body { border:1px solid #AAC; padding:4px; margin-bottom:10px;  }



/* ===================================
    LOGIN - centralise the Sign-in Section affects div.body_central
 ===================================== */
div.login_block { margin: 0, auto; width:360px;}

/* ===================================
    HOMEPAGE +  FONT OVERRIDES
 ===================================== */
div.hp-container { width:70%;  margin:0 auto; border:1px solid #ccc; padding:20px; }
div.homepage {     border:0px solid #c00; }


div.homepage p { padding-bottom:0px;   }	

.F16 { font-size: 16px; }
.font-b-16 { font-size:16px; font-weight: bold; }
.font-b-18 { font-size:18px; font-weight: bold; font-family: Arial, Calibri, sans-serif;}

/* ======== TABLE OVERRIDES =========== */
thead tr th { text-align:center; }
div.thdr_rel        { position:relative;}      /* 2014.0319 to allow for help icon absolutely placed */
table.TC_BS    {  border:1px solid #CCC; border-spacing: 1px;   }     /* table-layout:fixed;    */



/*===============================================
	  SCROLLING TABLES - NEW STRUCTURE FOR  

      TimeSheet Input Table -  scrolling table body (?)
        to accommodate vert scrollbar "float-left"  we now have
		2 extra divs around the main_table
		don't want height here - messes up tab#jobspage

===============================================*/

.activity_wrap .xth {
    font-weight:700;
    text-align:center;
}
.activity_header {
    border-bottom:1px solid #AAA;
}
	/* NOT fixed height, set a maximum and then scroll/overflow */
.max_height_wrap {
  max-height:300px; 
  overflow-y:auto;
  border-bottom:1px solid #AAA;
}
	/* last block on student edit page - space off */
.correspondence { padding-bottom:30px; }

.XXfixed_header  thead { display:block; }

.fixed_header tbody{
  height:300px;

}
.fixed_header thead tr{
  display:block;
}



/*===============================================
    TABLE CONTROL / ACTIVE ROW
=================================================*/
tr.arcOn { background: #AEA; }
tfoot.footer { padding-bottom:10px; }

div.shatt { padding:20px; font-size:1.2em;  }   /* shatt el-arab */

/*===============================================
    TABLE FILTERBLOCK
=================================================*/

div.filterblock  {  height: 42px;  }    /* border:1px solid red; */
div.filterblock  .list_title { float:left; width:300px; }
div.filterblock  .filter_input { float:right; margin-right:60px; }

/*==============================================
    TABLE INPUTS  - AGAIN
==================================================*/

/* inputs in multi-row edits */
tr.registrations td.multi_a input { width: 120px; }

input.readonly { background: #ccd; }


/* 2020.02 adjust datepicker css
*/
td.multi_a { position:relative; }
.dpick-relative  { position:relative; }

a.date-picker-control { position:absolute; top:5px; right: 5px; }
.sbs>textarea.courseInfo { height:60px; padding:5px; font-size:14px;  resize:none; }



/*==============================================
        STUDENT EDIT & OPTIONS ENTRY
==================================================*/


	/*  */
.notes_block {  width:75%;
				border:1px solid #ccc; 
				border-radius:10px; 
				box-shadow:3px 3px 4px #CCC; 
				}
.notes_title { background-color: #EEF; 
			   border-top-left-radius: 5px;
			   border-top-right-radius: 5px;
			   } 
.note_holder { width: 100%;}			   
.ta_note_input { width:100%; height:40px; border:1px solid #ccc; 
				border-bottom:none;
			resize:none;
		}

.ta_contact_memo { width:100%; height:40px; border:1px solid #ccc; 
			resize:none;
		}


.note_value { padding-left:20px; 
			background-color:#EEF;
			border-radius: 5px;  
			border-left: 4px solid #CCC;
			}





/*===================================================
tabber is the tabbed menu block  9/10/08 -> classes
 how much padding to apply to WHOLE THING - 2 figures give TB then LR
 2013.11 Change id to class - need two of them
====================================================*/

/* #tabber IS a wrapper   background:yellow;
    height sets distance below the line
	 background:yellow;
*/
.tabber {
 	height:2.0em;
	margin-top:2px;
	margin-left: 5px;	/* offset of whole thing from Left Edge  3px*/
	padding: 0px 0;
    margin-bottom:5px;      /* dammit need this else table continues on line  in FFox */
	}
.tabber:hover { cursor: default; }

/*.tabber.jobtab { margin-top:40px;} */

/* ok tabber class applies to all those divs within tabber
give everything a border but no bottom border on the active*
padding 4 is Top Right Bottom Left
2014.01 don't have an "off" - just add or remove the "on" class */
.tabber div {
		/* float:left;   float:left is ESSENTIAL - else the Tabs just go down the page
           leave height to pernt div  height:15px;  */
    display:inline-block;
	border: 1px solid #BBB;
    border-bottom: 1px solid #778;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	padding: 5px 15px 5px 15px;
    font: bold 16px   Arial , Helvetica ,  sans-serif;  /* some pages don't have hrefs */

}

.tabber div a { 	font: bold 12px   Arial , Helvetica ,  sans-serif; }

   /* when it goes ON just switch off the bottom border */
.tabber div.on {
	border-bottom:none;
    background:#FFA;        /* light yellow */

}

/* OFF is now RED give the OFF ones a slightly lighter colour but not on the bottom border
    .tabber div.off  { 	border: 1px solid #BBB; border-bottom: 1px solid #778;   background:none; }
*/



/*===================================================================
                    IMPORTING FILES
from SO 21842274/-custom-styling-for-file-upload-button
================================================================*/


label.importFileLabel input[type="file"] {
    position:absolute;
    left:300px;
    top: -100px;
}
.importFileLabel {
    border: 2px solid #AAA;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 2px;
    background: #DDD;
    display: inline-block;
}
.importFileLabel:hover {
    background: #CCC;
}
.importFileLabel:active {
    background: #CCF;
}
.importFileLabel :invalid + span {
    color: #A44;
}
.importFileLabel :valid + span {
    color: #4A4;
}

/*===================================================================
                    REPORTS
e.g. Course Report, a summary line then detail lines
================================================================*/
.report_header tbody>tr {
    background: #EEF;
    border-bottom:1px solid #999;
    }

.report_selector { padding-bottom:20px; }
.report_detail thead>tr { font-style: italic;}
.report_detail tfoot th {  padding-bottom:20px; }
.report_closed {display:none; }
td.note_holder   { padding-bottom:20px;}
td.note_holder textarea  {position:absolute; left: 100px;  }


tr.hov_hand:hover,
td.hov_hand:hover { cursor: pointer;}

.report_notes  {height:2em;  }


/*===================================================================
                    EMAIL DISPLAY / FORM / EDIT DIALOG 
================================================================*/


td.econtent { font-size: 14px; }
td.econtent.W600 { width:600px; }
td.eaddress { font-size: small; overflow:hidden;  margin-right:5px; }

    /* styling for content editable
    Not in Use .conedit { width:300px; height:300px; )
    */
tr.pad-tb-10 > td { padding-bottom:10px; }


.base_dialog {
        position: absolute;  left : 200px; top:200px;
        display:flex;
        flex-direction:column;
        width:600px;   
        border: 2px solid #CCC;
        padding: 5px;
        padding-bottom:10px;
        background-color: #FFD; /* ; EEEEEE99*/
        z-index:20;
        /* opacity: 0.9;    */
 }
.base_dialog.email       { 	height:500px;  }
.base_dialog.relation    { 	height:300px;  }
.base_dialog.invoice_address  { 	height:350px;  }

.base_dialog.dlgWarning {  position: absolute;  left : 600px; margin-left:20px;
        border:0px; padding:20px;
        background-color: transparent;
        z-index:-10;    /* 2015.04 make sure its BEHIND the list of customisable table columns */
}
.base_dialog.move { cursor : move;}

div.dlg_close_container { position:absolute; top: -5px; right: -5px; }

div.dlg_banner { height:32px;
                background:#ccc;
                border-bottom:1px solid #FFF; }

div.dlg_banner.ralign  { text-align:right; }
div.dlg_banner .icon   { margin-right:20px; }   /* padding-left:10px;*/

img.closer { width:24px; height:24px; margin-top: 4px; }   /* for height 32px */
img.closer:hover { cursor:pointer; }

    /* formatting of header inputs divs */
div.e_hdr_wrap { margin-right:10px }
div.header_line {width: 100%; padding-bottom:5px;}
div.header_line .left  { display: table-cell; min-width:60px; }
div.header_line .right { display: table-cell; width:100%; }

.invoice_address .header_line .left  { min-width:120px; }

div.e_format_row {  height:20px; padding: 10px 0 }



    /* 2020.0413 switch to div
        textarea.e_content_area.W500 { width:600px;}
        */
div#e_content_wrap {  display:flex; flex-direction:row;
            height:50%; }
.e_content {
    flex:1;
    height:100%;
    border: 1px solid #ccc;
    margin-left:60px;
    margin-right:10px;
    margin-top:5px;
    resize:  none;
    background-color: #fff;
    overflow-y:auto;
}

/* for testing read_pdl (invoicing)  just want a normal inline input */
input.ip_control_normal { display:inline-block; border: 1px solid #ccc; width:80px; margin-left:10px; padding-left:5px; }

/*======= TEXT INPUTS  ====================
	start inputs from app:form-control & reduce
       xx  height: 24px;
===========================================*/
   
.ip_control_s {
    display: block;
    width: 100%;

    padding: 6px 4px;
    font-size: 16px;
    line-height: 1.0;
    color: #333333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
.ip_control_s:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
	
	
/*===================================================================
                   EMAIL TEMPLATE (Emails)
================================================================*/

.etemplate_ta  {   min-width:500px; min-height:500px; }


/*===================================================================
                   RCONTEXT MENU  (Emails)
================================================================*/

div.rContext_00{
	position: absolute;
	width: 150px;  /* 12em */
    height:200px; /* 18em; */
	border: 1px solid black;
	padding: 5px;
	background-color: #FFF; /* ; EEEEEE99*/
	z-index: 100;
}

    /* indicate in the table where a Context Menu is available Apply to TD elements */
.rcAvailable:hover     { cursor:context-menu;}


            /* duh! Horiz +/-, Vert +/- , blur, spread(=width) */
div.rContext {    position:absolute;
                width : 160px;
                background-color:#FFF;
                margin:0; border :1px solid #ccc; padding:0;
                box-shadow:            2px 2px 1px #CCC;           /* Old browsers */
                -moz-box-shadow:    2px 2px 1px #CCC;          /* FF3.6+ */
                -webkit-box-shadow: 2px 2px 1px #CCC;          /* Chrome,Safari4+ rgba(1,0,0,0.3)*/
                z-index:10;
             }
             /* start with items grayed out, then add black if they are possible
                If we want a gray border top/bottom on the hover,
                then we HAVE to put them in on the non-hover,
                else the text jumps as you add/remove borders
             */
div.rContext  div.item, div.rContext div.item_ip  {
                        margin:5px 0 10px 0; padding:0px  2px  0px 10px;
                        background-color:#FFF;
                        border-top:1px solid #FFF; border-bottom:1px solid #FFF;
                        }
div.rContext  div.item:hover   {  background-color:#EEE; border-top:1px solid #AAA; border-bottom:1px solid #AAA;
                        cursor: default; }    /* why blue? #68F*/

    /* for bank_alloc, make narrower */
div.rContext  div.bank {  margin:5px 0 5px 0; padding:0px  2px  0px 10px;
                        background-color:#FFF;
                        border-top:1px solid #FFF; border-bottom:1px solid #FFF;
                        }
div.rContext  div.bank:hover   {  background-color:#EEE;border-top:1px solid #AAA; border-bottom:1px solid #AAA;   }    /* why blue? #68F*/
div.rContext   .rcopt { margin:0 5px 0 5px;
                        padding:5px 5px;
                        color:#000; z-index:20;}  /*color:#CCC; */
div.rContext   .rcopt.black  { color:#000; }  /*color:#CCC; */
div.rContext  .imgWrap { display:inline-block; text-align:right;}
div.rContext  img {   padding-left:15px; width:16px; height:16px;  background-color:#FFF;  }
div.rContext .incm, td.incm { border:1px solid #ccc;padding:0px; }
div.rContext .noPad   { padding-left:0px;} /*not specific enough */
div.rContext span.measure { padding-left:4px;}
div.rContext hr { height:2px;border-width:0; color:#CCC;background-color:#CCC;noshade:1;}


div.email_banner_context { margin:2px; border:1px solid black;
                    text-align:center;
                    background-color:#E66; color:#444;
                    font-weight: 700;
}


/*===================================================================
                   BANK NEW PAYMENT   FORM
================================================================*/
div.new_payment_dialog {
        position: absolute;  left : 200px; top:200px;
        width:400px;
        height:400px;   /*12em;*/
        border: 2px solid #CCC;
        padding: 5px;
        background-color: #EEF  ; /* ; EEEEEE99*/
        z-index:20;
        /* opacity: 0.9;    */
 }
div.newpay_hdr > .header_line {width: 95%; padding-top: 10px; padding-bottom:5px;}
div.newpay_hdr > .header_line .left  {display: table-cell; min-width:140px;}
div.newpay_hdr > .header_line .right {display: table-cell; width:100%;}


/*===================================================================
                   formatting of SUPER functions
================================================================*/

.super.indent { padding:20px; background:#FAFAFA;
                font-family: arial;}
table.super   { border-collapse : collapse;  margin:10px 0;}
table.super tr { background: #fff;
            border-top:1px solid #DDD;
            border-bottom: 1px solid #DDD;
           }

table.super tr>td { padding:10px;
           }

/*===================================================================
                   THANKYOU responses and the like
================================================================*/

.thankyou {
    width:440px;
    margin:0 auto;

}
.thankyou> .inner { margin-top:40px;
}