/* ====================== IMPORTS ====================== */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');


/* ====================== DEFAULTS ====================== */
*
{
	font-family: 'Open Sans', sans-serif;
}

body
{
	width:100%;
	height:100vh;
	margin:0;
	padding:0;
	background:#f1f3f5;
	overflow-y: auto;
	font-size: 13px;
}

/* ====================== TEXT ====================== */
h1
{
	font-size:180%;
	font-weight:600;
}

h2
{
	font-size:140%;
	font-weight:500;
}

.CurrentContent h3
{
	text-indent: 12px;
    width: 100%;
    margin: 0;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    background: none;
    color: #65676b;
    padding-top: 4px;
    padding-bottom: 10px;
    border-bottom: solid 1px #33333330;
}

.CurrentContent p + h3
{
	margin-top: 20px;
	padding-top: 10px;
    /* border-top: solid 1px #33333330; */
}

.CurrentContent > .Shadow > h3
{
	width:100%;
	margin:0;
	text-indent: 0px;
    font-weight: 600;
	background:#333;
	color:#f9f9f9;
	text-align:center;
	padding-top:8px;
	padding-bottom:8px;
	border-radius: 8px;
}

.CurrentContent > .Shadow > h3 > i
{
	font-size: 22px;
	margin-right:4px;
}

.CurrentContent > .Shadow > h3 > i:before
{
	background: #333;
	height: 32px;
    width: 32px;
}

.CurrentContent > .Shadow > h3 > span:first-of-type
{
	font-size: 26px;
}

.CurrentContent > .Shadow > h3 > span:last-of-type
{
	font-size: 16px;
}


h4
{
	font-size:110%;
	margin:0;
	margin-top: 6px;
	margin-bottom:6px;
	line-height:140%;
	font-weight:600;
}

p, 
ul,
ol
{
	margin-top: 6px;
    margin-bottom: 6px;
    line-height: 160%;
    font-size: 16px;
    font-weight: 300;
    width: 100%;
    color: #65676b;
}

b
{
	font-weight: 400;
}

table b
{
	font-weight: 600;
}


/* ====================== ICONS ====================== */
i
{
	color: #f9f9f9;
	font-size: 14px;
}

i:before
{
	background: #0004;
    height: 28px;
    width: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-indent:0;
}

h3 i
{
	font-size: 14px;
}

h3 i:before
{
	background: #65676b;
    height: 28px;
    width: 28px;
    margin-right:4px;
}

.InputContainer > i
{
	border-radius: 0;
	font-size: 160%;
	background: #4f5154;
	color: #f9f9f9;
	width: 40px;
	height:auto;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0;
	margin-left: 4px;
}

img
{
	width:100%
}

img.Logo
{
	max-width: 220px;
    padding-top: 10px;
    padding-bottom: 20px;
    bottom: 0;
    align-self: center;
    position: fixed;
}



/* ====================== HEADER + FOOTER: LOGIN ONLY ====================== */
header
{
	color: #575859;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 150px;
    width: 100%;
}

footer
{
	padding: 18px 10%;
    text-align: center;
    background: #333;
    color: #f9f9f9;
    position:fixed;
    bottom:0;
}



/* ====================== FLEX SYSTEM ====================== */

.GroupedContent
{
	height:100vh;
	display: flex;
    flex-direction: column;
}

main,
dialog
{
	display: flex;
    flex-direction: row;
    justify-content: center;
    justify-self: center;
}

.CurrentContent
{
	display: flex;
    flex-direction: column;
    align-items: center;
        
    width:90%;
	margin-bottom:34px;
	margin-top: 60px;
}

.TopPageSection
{
	
    position: fixed;
    z-index: 100;
    
    top:56px;
    width: 96%;
    
    display: flex;
    justify-content: center;
    padding: 5px 2%;
    background: #333;
    border-bottom: 1px solid #cccccc;
	
}

.Login .TopPageSection
{
	top:0;
}

.Login .CurrentContent
{
	margin-top:80px;
}

.TopPageSection > div
{
	width: 92%;
}

.Popup .TopPageSection > div
{
	width:100%;
}

dialog.Popup > .TopPageSection
{
    width: 90%;
    top: unset;
    margin-top: -52px;
    border-top-left-radius:6px;
	border-top-right-radius:6px;
}

dialog.Menu > .TopPageSection
{
    border-top-left-radius:6px;
	border-top-right-radius:6px;
	top: 110px;
	width: 86%;
}

.CurrentContent div
{
	display:flex;
	width: 100%;
	justify-content: space-around;
}

.CurrentContent > div,
.TopPageSection > div
{
	display: flex;
	justify-content: space-between;
}

.TopPageSection > div
{
	flex-direction: row;
}

.CurrentContent > div
{
	flex-direction: column;
}


.CurrentContent > div div
{
	flex-wrap: wrap;
	height:fit-content;
	height:-moz-fit-content;
}

.CurrentContent > div div.Wrap
{
	flex-wrap: initial;
}

.SubPageSection
{
  	position: fixed;
  	margin-top:-50px;
    z-index: 50;
    width: 88%!important;
    min-height: 48px;
    overflow-x: auto;
    display: flex;
    justify-content: center;
    padding: 4px 3%;
    background: #ffffff;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    justify-content: revert;
}

.SubPageSection > h3,
.ContentOptions > nav > h3
{
	width: 60px;
    font-size: 16px;
    padding-top: 14px;
    background:none;
}

.DevelopmentImprovements
{
	position: absolute;
   	right: 7%;
    margin-top: 12px;
    z-index: 10;
}

.DevelopmentImprovementsList
{
	position: absolute;
    z-index: 20;
    width: 30%!important;
    right: 5.8%;
    margin-top: 90px;
}

button.Disabled
{
	background:#f1f3f5;;
}

/* SPACING FOR SUB ITEMS */
div.Shadow
{
	border-radius: 8px;
	padding: 1%;
	width: 98%;
	height: fit-content;
	margin-top:22px;
	
	background: #ffffff;
	
	-webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
    -moz-box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
    box-shadow: 0 1px 6px rgb(0 0 0 / 20%);
}

div.Shadow > div
{	
	/* overflow-x: auto;*/
	justify-content: revert;
}

div.Border
{
	border-radius: 8px;
	padding: 1%;
	width:98%;
	height: fit-content;
   	margin-top: 10px;
    margin-bottom: 8px;
    
    background: #ffffff;
	border: solid 1px #33333330;
}

div.Border > div
{	
	justify-content: revert;
}

.CurrentContent table,
.CurrentContent .question
{
	margin-top:4px;
	margin-bottom:4px;
}

.CurrentContent [data-output="ContentPages"] > button
{
	margin-top:4px;
	margin-bottom:4px;
	
	padding-top: 10px;
    padding-bottom: 10px;
}

/* ====================== NAVIGATION: PAGE TITLE (FOR BUTTONS SEE BUTTONS + LINKS) ====================== */

.PageTitle
{
	color: #f9f9f9;
	padding:9px;
	max-height: 26px;
    overflow: hidden;
}

dialog .PageTitle
{
	margin-left: 0;
}

.PageTitle > span:first-of-type > span:last-of-type
{
	border-bottom: 1px solid #ff7d01;
	color: #ff7d01;
	font-weight: 400;
	cursor: pointer;
}

.PageTitle > span:first-of-type > span:last-of-type:hover
{
	border-bottom: 1px solid #009fd0;
	color: #009fd0;
}

.PageTitle > span:nth-of-type(even)
{
	margin-left:6px;
	margin-right:6px;
}

/* ====================== SIDEBAR: TOOLBAR, SETTINGS, MESSAGE, TICKETS ====================== */
.ToolBar
{
	position: fixed;
	top: 0;
	z-index:110;
	overflow: hidden;
	
    width: 100%;
    height: 56px;
    display: inline-flex;
	
	background: #333;
	transition: width 0.5s;
}

.ToolBar > button,
.TopPageSection button,
.SubPageSection button,
a.Button
{
	border-radius:0;
	padding-top:14px;
	padding-bottom:14px;
	margin-bottom: 0;
	margin-top: 0;
}


/* ====================== DIALOGS: POPUP, MENU, TABS ====================== */

dialog
{
	padding:0;
	border: none;
	background:#f1f3f5;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	height: auto;
    max-height: 74%;
	
	margin:auto;
	padding-bottom: 6px;
	display: flex;
	position: relative;
	overflow: auto;

	
	-webkit-box-shadow: 0 2px 8px rgb(0 0 0 / 26%);
	-moz-box-shadow: 0 2px 8px rgb(0 0 0 / 26%);
	box-shadow: 0 2px 8px rgb(0 0 0 / 26%);
}

dialog.Popup
{
	top: 120px;
    width: 94%;
    z-index: 115;
    position: fixed;
}

dialog.Menu
{
	position: fixed;
    width: 90%;
	top: 165px;
	z-index: 125;
}

dialog .CurrentContent
{
	width:96%;
	margin-top: 50px;	
}

.dialogArea,
.MenuArea
{
	position:fixed;
	z-index:110;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:#333333;
	opacity:0.7;
}

.MenuArea
{
	z-index:120;
}

.GroupedTabs
{
	position: fixed;
    top: 22px;
    left: 9%;
    overflow: hidden;
    float: left;
    width: 82%;
    height: 46px;
}

.Tab
{
	float: left;
	z-index: 100;
	background: #333333;
	padding: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	
	width:234px;
	margin-right:10px;
	height:30px;
	overflow:hidden;
}

.Tab:hover
{
	background: #33333390;
}

.PreviousTab
{
	background: #222;
}

.PreviousTab > .TabName
{
	color: #cdcdcd;
}


.Tab > .TabName
{
	float: left;
	width: 160px;
	overflow:hidden;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 400;
    color: #f9f9f9;
    margin-left: 4px;
    margin-top:4px;
    
    
}

.Tab > .TabButtons
{
	float:left;
}

.Tab > .TabButtons > i
{
	margin-left:6px;
	background: #ff7d01;
	border-radius:100%;
}

.Tab > .TabButtons > i:hover
{
	background: #009fd0;
}





/* ====================== FORMS: INPUTS, SELECTS, TEXTAREA, OPTIONS ====================== */
.question,
.question > span
{
	display: flex;
    width: 100%;
    position: relative;
}

.question
{
	min-height: 40px;
}

.question > span.ButtonOutputContainer
{
	width:50%;
}

input,
select,
textarea,
output,
label
{
	margin: 0;
    padding: 0;
    width: 100%;

    background: #f0f3f5;
    color: #222;
    
   border: solid 1px #33333330;
}

input,
select,
textarea
{
	text-indent: 10px;
	margin-left: 4px;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	
}

output,
label
{
	justify-content: center;
	text-align:center;
	position: relative;
	display: flex;
    align-items: center;
}

output
{
	max-width: 120px;
}

label
{
	background: #f0f3f5;
    color: #4f5154;
    font-size: 15px;
    display: flex;
    align-items: center;
    height: auto;
}

.question > span.ValidationMessage
{
	width: fit-content;
	padding: 5.5px;
	right:0;
	top: 0;
	align-items:center;
	margin-left:4px;
	border: solid 1px #33333330;
}

input[type="text"]:hover,
input[type="date"]:hover,
input[type="email"]:hover,
input[type="autocomplete"]:hover,
select:hover,
textarea:hover,
input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="autocomplete"]:focus,
select:focus,
textarea:focus
{
	box-shadow: 0px 0px 0px 1px  #009fd0 inset;
	-webkit-box-shadow: 0px 0px 0px 1px  #009fd0 inset;
	-moz-box-shadow: 0px 0px 0px 1px  #009fd0 inset;
	transition: 0.2s;
}

.HTMLTextArea
{
	width:100%;
	min-height:200px;
	background: #cdcdcd;
}

input:disabled:hover,
select:disabled:hover
input:disabled:active,
select:disabled:active
{
	box-shadow: 0px 0px 0px 0px  #009fd0 inset;
	-webkit-box-shadow: 0px 0px 0px 0px  #009fd0 inset;
	-moz-box-shadow: 0px 0px 0px 0px  #009fd0 inset;
	transition: 0.2s;
}

.BlackOutField
{
	position:relative;
}

.BlackOutField > input
{
	background: #222;
	color: #222;
	position:relative;
}

.BlackOutField::after
{
	content: "Click To View";
    text-align: center;
    color: #f9f9f9;
    position: absolute;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

input:disabled,
select:disabled
{
	opacity: 1;
	background:#4f5154;
	color:#f9f9f9;
}

textarea
{
  	resize: none;
  	height: 80px;
	text-indent: 0px;
	padding: 10px;
}

.TextEditor
{
	height: 260px;
	min-width: 260px;
}

input[type="checkbox"]
{
	width: 22px;
	height: 34px;
	background:#4f5154;
}

input[type=range] 
{
  width: 100%;
  margin: 0 0;
  background-color: transparent;
  -webkit-appearance: none;
  border:none;
}

input[type=range]:focus 
{
  outline: none;
}


input[type=range]::-webkit-slider-runnable-track 
{
  	background: #f0f3f5;
  	border-radius: 6px;
  	margin-left:5%;
	margin-right:5%;
  	height: 8px;
  	cursor: pointer;
  	border: solid 1px #33333330;
}

input[type=range]::-moz-range-track 
{
  	background: #f0f3f5;
  	border-radius: 6px;
	margin-left:5%;
	margin-right:5%;
	height: 8px;
  	cursor: pointer;
  		border: solid 1px #33333330;
}

input[type=range]::-ms-track 
{
  	background: #f0f3f5;
  	border-radius: 6px;
	margin-left:5%;
	margin-right:5%;
	height: 8px;
  	cursor: pointer;
  	border: solid 1px #33333330;
}


input[type=range]:focus::-webkit-slider-runnable-track 
{
  	background: #1Db954;
}

input[type=range]:hover::-webkit-slider-runnable-track
{
	background: #009fd0;
}

input[type=range]:hover::-moz-range-track
{
	background: #009fd0;
}

input[type=range]:hover::-ms-track
{
  	background: #009fd0;
}












input[type=range]::-webkit-slider-thumb
{
  margin-top: -14px;
  width: 16px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #33333330;
  border-radius: 3px;
  cursor: pointer;
  -webkit-appearance: none;
}

input[type=range]::-moz-range-thumb 
{
  width: 16px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #33333330;
  border-radius: 3px;
  cursor: pointer;
}

input[type=range]::-ms-thumb 
{
  width: 16px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #33333330;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 0px;
}

@supports (-ms-ime-align:auto) 
{
  input[type=range] 
  {
    margin: 0;
  }
}





	
.question span[type="switch"]
{
	width:100%;
	display: flex;
	justify-content: space-between;
}

span[type="switch"] input 
{
	display:none;
}

.question span[type="switch"].hidden > label,
.question span[type="switch"].hidden > input
{ 
	display:none;
}

span[type="switch"] label 
{
    background: #f0f3f5;
    color: #4f5154;
    width: 50%;
   margin-left: 4px;
}

span[type="switch"] label:hover 
{
	cursor: pointer;
	transition: 0.2s;
	color: #f9f9f9;
}

span[type="switch"] input:checked + label 
{
  	background: #1Db954;
  	color: #f9f9f9;
}

span[type="switch"] input:disabled + label
{
	background: #444;
	color: #f9f9f9;
}

span[type="switch"] input:disabled:checked + label
{
	background: #1Db954;
}

span[type="switch"] input + label:hover 
{
  	background: #009fd0;
    transition: 0.2s;
}

span[type="switch"] input:disabled + label:hover
{
	background: #444;
	color: #f9f9f9;
	cursor: default;
}

span[type="switch"] input:disabled:checked + label:hover
{
	background: #1Db954;
	color: #f9f9f9;
}






/* ====================== TABLES + SELECTABLES ====================== */
table
{
	border-collapse:collapse;
	border-radius: 8px;
    overflow: hidden;
    font-size: 15px; 
    width: 100%;
}

th
{
	position:relative;
	background:#4f5154;
	color:#f9f9f9;
	height:34px;
	text-align:center;
	font-weight:500;
	
	-moz-box-shadow:    inset 0 0 0 0.4px #e1e1e1;
	-webkit-box-shadow: inset 0 0 0 0.4px #e1e1e1;
	box-shadow:         inset 0 0 0 0.4px #e1e1e1;

}

table > thead th
{
	height:50px;
	background:#000;
}

td
{
	background: #f1f3f5;
	color: #4f5154;
	
	min-width: 40px;
	
	padding:12px 8px;
	
	text-align:center;
	
	-moz-box-shadow:    inset 0 0 0 0.4px #e1e1e1;
	-webkit-box-shadow: inset 0 0 0 0.4px #e1e1e1;
	box-shadow:         inset 0 0 0 0.4px #e1e1e1;
	
	overflow-wrap: break-word;
}

[data-selectable] > td
{
	background:#ff8000;
	color:#f9f9f9;
}

[data-selectable]:hover:not(.ui-selecting) > th,
[data-selectable]:hover:not(.ui-selecting) > td
{
	background:#009fd0;
	transition: 0.2s;
}

/* SMART CHARTS */

.SmartChartBar tr > td
{
	float: left;
	min-width: auto;
	max-width: 100%;
	background: #4f5154;
	color: #f9f9f9;
	height: 30px;
	padding-top: 20px;
    padding-bottom: 10px;
}

.SmartChartBar tr > td:first-of-type
{
	width: 14%;
}


.SmartChartBar tr > td:nth-of-type(1)
{
	width: 14%;
}






/* COLOUR ROWS */
[data-selectable].Hex2596be > td{background:#2596be; opacity:1;}
[data-selectable].Hexe28743 > td{background:#e28743; opacity:1;}
[data-selectable].Hexeab676 > td{background:#eab676; opacity:1;}
[data-selectable].Hex76b5c5 > td{background:#76b5c5; opacity:1;}
[data-selectable].Hex873e23 > td{background:#873e23; opacity:1;}
[data-selectable].Hexabdbe3 > td{background:#abdbe3; opacity:1;}
[data-selectable].Hex154c79 > td{background:#154c79; opacity:1;}
[data-selectable].Hexeb1677 > td{background:#eb1677; opacity:1;}
[data-selectable].Hex85bf85 > td{background:#85bf85; opacity:1;}
[data-selectable].Hexffaacc > td{background:#ffaacc; opacity:1;}
[data-selectable].Hex5e4474 > td{background:#5e4474; opacity:1;}
[data-selectable].Hexff1515 > td{background:#ff1515; opacity:1;}
[data-selectable].Hexc5e6a6 > td{background:#c5e6a6; opacity:1;}
[data-selectable].Hexf4dbb0 > td{background:#f4dbb0; opacity:1;}

.red,
.red > td,
[data-selectable] > td.red,
button.red
{
	background:#ca0909;
	color:#f9f9f9;
}

.red > th,
span label.red
{
	color:#f9f9f9;
}

.red ul
{
	color: #f9f9f9;
	text-align: left;
}

.red ul li
{
	width:100%;
}

.blue,
.blue > td,
[data-selectable] > td.blue,
button.blue
{
	background:#009fd0;
	color:#f9f9f9;
}

.blue > th,
span label.blue
{
	color:#f9f9f9;
}

.green,
.green > td,
[data-selectable] > td.green,
button.green
{
	color:#f9f9f9;
	background:#1Db954;
}

.green > th,
span label.green
{
	color:#f9f9f9;
}

.orange,
.orange > td,
[data-selectable] > td.orange,
button.orange,
span label.orange
{
	background:#ff8000;
}

.orange > th
{
	background:#b85c00;
	color:#f9f9f9;
}


.purple,
.purple > td,
[data-selectable] > td.purple,
button.purple
{
	background:#a35ab4;
}

.purple > th,
span label.purple
{
	background:#a35ab4;
	color:#f9f9f9;
}

.yellow,
.yellow > td,
[data-selectable] > td.yellow,
button.yellow
{
	background:#F4BC1C;
}

.yellow > th,
span label.yellow
{
	background:#F4BC1C;
	color:#f9f9f9;
}

.OrangeBar:after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 10px;
	background: #ff8000;
}

.PurpleBar:after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 10px;
	background: #a35ab4;
}

.YellowBar:after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 10px;
	background: #F4BC1C;
}


.grey,
.grey > td,
[data-selectable] > td.grey,
button.grey
{
	background:#aaa;
}

.grey > th,
span label.grey
{
	background:#aaa;
	color:#f9f9f9;
}

.DarkGrey,
.DarkGrey > td,
[data-selectable] > td.DarkGrey,
button.DarkGrey
{
	background:#555;
	color:#f9f9f9;
}

.DarkGrey > th,
span label.DarkGrey
{
	background:#555;
	color:#f9f9f9;
}

[data-selectable].ui-selecting > td,
[data-selectable].ui-selecting > th
{
	opacity:0.6;
}

[data-selectable].ui-selected > td,
[data-selectable].ui-selected > th
{
	background:#1Db954;
}

td.Divide
{
    padding: 4px;
    margin: 0;
    background: #444;
}

td button
{
	margin:0;
}

.textBreak
{
	word-wrap: break-word;
	overflow-wrap: anywhere; /* ED ADDED TO FIX NOTES TABLE SIZING TO LARGE*/
}






/* ====================== BUTTONS + LINKS + AUTO COMPLETE + LOADERS ====================== */
button,
a.Button
{
    font-weight: 600;
    border: none;
    outline: none;
    border-radius: 8px;
    background: #ff8000;
    color: #f9f9f9;
    
    text-align:center;
    text-decoration: none;
    
    padding-top: 6px;
    padding-bottom: 6px;
    margin-top: 4px;
    
	align-items: center;
	
    -webkit-box-shadow: 0px 0px 0px 1px rgb(219 219 219 / 70%), inset 0px 0px 16px 1px rgb(0 0 0 / 8%);
    -moz-box-shadow: 0px 0px 0px 1px rgba(219,219,219,0.7), inset 0px 0px 16px 1px rgb(0 0 0 / 8%);
    box-shadow: 0px 0px 0px 1px rgb(219 219 219 / 70%), inset 0px 0px 16px 1px rgb(0 0 0 / 8%);
}

button > span,
a.Button > span
{
	font-size: 16px;
    font-weight: 400;
    margin-left: 4px;
    margin-right: 4px;
}

.question button
{
	margin-left:10px;
}

a
{
	color:#ff8000;
	font-size:inherit;
}

button:hover,
a:hover
{
	opacity:1;
	background:#009fd0;
	transition: 0.2s;
	cursor: pointer;
}

button:active,
a:active
{
	opacity:0.8;
	background:#009fd0;
}

.ContentOptions > nav
{
	display:flex;
	flex-direction: row-reverse;
}

.ContentOptions button,
.SubPageSection button
{
	width:auto;
	padding: 8px 8px;
	border-radius: 8px;
	margin-left:10px;
}

.SubPageSection button
{
	margin-top: 2px;
	margin-bottom: 2px;
}


button[data-action="SearchNew"]
{
	padding: 0px;
}

[data-output="Search"] > .SubPageSection button
{
	min-width: 130px;
}

.ToolBar button > span,
.ContentOptions button > span,
.SubPageSection button > span,
.TableButtons button > span
{
	font-size: 14px;
}



.ToolBar button:hover > span,
.ContentOptions button:hover > span,
.SubPageSection button:hover > span,
.TableButtons button:hover > span,
.ValidationMessagePopUp > span
{
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #555;
	z-index: 50;
	font-weight: 600;
	margin-top: 20px;
}

.ToolBar button:hover > span,
.ContentOptions button:hover > span,
.SubPageSection button:hover > span,
.TableButtons button:hover > span
{
	background: #444;
	display: block;
	position: fixed;
}

.ValidationMessagePopUp > span
{
    position: absolute; 
    left: 0;
    min-width: 160px;
}

.ValidationMessagePopUp > span > span
{
	margin-left:10px;
}



div.ConfirmationPopup > div
{
	border-top: 50px solid #4f5154;
    position: fixed;
    top: 200px;
    z-index: 70;
    width: 88%;
    border-radius: 8px;
    padding: 2%;
    height: fit-content;
    height: -moz-fit-content;
    margin-top: 22px;
    background: #f9f9f9;
	
	-webkit-box-shadow: 0 2px 8px rgb(0 0 0 / 16%);
    -moz-box-shadow: 0 2px 8px rgb(0 0 0 / 16%);
    box-shadow:  0 2px 8px rgb(0 0 0 / 16%);
}

div.ConfirmationPopup:before
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: #33333399;
	content: " ";
	z-index:69;
}

.ConfirmationOfAction
{
	width:60%;
	background: #1Db954;
}


.ConfirmationOfClose
{
	width:36%;
	background: #aaa;
}

.ButtonOutputContainer > button
{
	margin:0;
	padding-top: 4px;
	padding-bottom: 4px;
	margin-left: 4px;
}

.ButtonDivide
{
	border-left: solid 1px #33333330;
	margin-left: 8px;
}

button.Thin,
a.Button.Thin
{
	width:100%;
	
	float:left;
	
	margin-top:0;
	margin-bottom:0;
	
	padding-top:4px;
	padding-bottom:4px;
}

[data-output="Quote"] .p30
{
	position: relative;
}

/* QUOTE BUTTON */
div[data-objectid="1285"],
div[data-objectid="1288"],
div[data-objectid="2375"]
{
	position: absolute;
	top:100%;
}

.QuoteProgressBar
{
	width: 50%!important;
    left: 25%;
    top:16%!important;
    z-index: 80!important;
}

.QuoteLoaderBackground
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: #33333390;
	content: " ";
	z-index:69!important;
}

.QuoteProgressBar > progress
{
	width:100%;
	height: 20px;
	margin-top:10px;
	-webkit-appearance: none;
	border-radius: 8px;
	overflow: hidden;
}

::-webkit-progress-value 
{
  	background-color: orange;
}


/* AUTO COMPLETE */
.AutoCompleteUL, 
.ui-menu,
.MultiSelectOptions
{
	width: 100%;
    z-index: 1;
    top: 38px;
    right:0;
    position: absolute;
    list-style: none;
    max-height: 250px;
    overflow: hidden;
    min-width: 200px;
    overflow-y: scroll;
}

.AutoCompleteBackground 
{
    background: #333;
    opacity: 0.5;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 0!important;
    padding: 0;
}

.MultiSelectOptions
{
	z-index: 215;
}

.AutoCompleteUL li, 
.ui-menu-item,
.MultiSelectOptions > span
{
	width: 100%;
    padding-left: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #dbdbdb;
    background-color: #ff8000;
    color: #f9f9f9;
}

.MultiSelectOptions > span:not(.hidden)
{
	display: flex;
	flex-direction: row;
}

.MultiSelectOptions > span > input
{
	margin-right:20px;
	width:30px;
	height:30px
}

.MultiSelectOptions > span > label
{
	margin-right:10px;
	background:none;
	border:none;
	color:#f9f9f9;
}

.AutoCompleteUL li:last-of-type, .ui-menu-item:last-of-type
{
    border-bottom: none;
}

.AutoCompleteUL .ActiveLI, .ui-state-focus
{
    background-color: #0493aa;
	cursor:pointer;
}



/* ====================== CUSTOMISED ====================== */


/* CUSTOMISED: SECTION BOX WITH WHITE BACKGROUND - SEE LOGIN PAGE */
.TextBox > p,
.TextBox > ul,
.TextBox > ol
{
	background: #f9f9f9;
    border-radius:8px;
  	padding: 3%;
    
    -webkit-box-shadow: 0 2px 8px rgb(0 0 0 / 16%);
    -moz-box-shadow: 0 2px 8px rgb(0 0 0 / 16%);
    box-shadow:  0 2px 8px rgb(0 0 0 / 16%);
}

.Text > p
{
	padding-left:2%;
	padding-right:2%;
}

/* CUSTOMISED: NOTIFICATION - ERROR, WARNING, GOOD, FADEOUT, NOTES */
.Cards
{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
}

.Notification,
.Card
{
	position:relative;
	display:flex;
	align-items: center;
	justify-content: center!important;
	z-index: 3;
}

.Card
{
	width: 80%;
	z-index: 2;
	align-items: inherit;
}

.Notification > span,
.Card > span
{
	width: 80%;
	border-radius: 8px;
    font-size: 16px;
    font-weight: 300;
    color: #555;
    padding: 14px;
    display: flex;
    align-items: center;
    margin-top:10px;
    margin-bottom: 10px;
    background: #ffffff;
    
    -webkit-box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
    -moz-box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
   	box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
    
}

.Card > span
{
	border: solid 1px #33333330;

    -webkit-box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
    -moz-box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
   	box-shadow: 0 2px 4px rgb(0 0 0 / 22%);
}

.Notification > span
{
    border: 1px solid #00000030;
    border-style: inset;
}

.Card > span
{
	flex-direction:column;
}

.Card > span > span
{
	width: 100%;
}

.Card .SubItems
{
	display:flex;
	flex-direction: row;
	width:100%;
	justify-content: space-between;
}

.Card .SubItems button
{
	width:49%;
}

.Notification > span > span:first-of-type
{
	display: flex;
    justify-content: center;
	width: 24%;
}

.Notification > span > span:last-of-type
{
	display: flex;
    justify-content: left;
	width:76%; 
	flex-direction: column;
}

.Notification.LargeIcon > span > span > i
{
	font-size: 55px;
	margin-top: 20px;
}

.Notification.LargeIcon > span > span > i:before
{
	width:100px;
	height:100px;
}

.Notification.Good > span,
.Notification.Good li
{
	background: #1Db954;
	color: #f9f9f9;
}

.Notification.Warning > span,
.Notification.Warning li
{
	background: #febf0f;
	color: #f9f9f9;
}

.Notification.Error > span,
.Notification.Error li
{
	background: #ca0909;
	color: #f9f9f9;
}

.Notification.BottomMiddle
{
	z-index: 155;
}

.Notification.BottomMiddle > span
{
	position: fixed;
    bottom: 14px;
    left: 0;
    margin-left: 2%;
    width: 90%;
    color: #f9f9f9;
    overflow:hidden;
}

.Notification.Note > span
{
    border: 1px solid #00000030;
    width: 30%;
}

.Notification.Note.BottomMiddle > span
{
	 margin-left: 34%;
}

.Notification.FadeOut > span
{
	animation: FadeOut 10s;
	-webkit-animation: FadeOut 10s;
	-moz-animation: FadeOut 10s;
	-o-animation: FadeOut 10s;
	-ms-animation: FadeOut 10s;
	opacity:0;
	pointer-events:none;
}

@keyframes FadeOut 
{
	0% {opacity:1;}
	80% {opacity:1;}
	100% {opacity:0;}
}

@-moz-keyframes FadeOut 
{
	0% {opacity:1;}
	80% {opacity:1;}
	100% {opacity:0;}
}

@-webkit-keyframes FadeOut 
{
	0% {opacity:1;}
	80% {opacity:1;}
	100% {opacity:0;}
}

@-o-keyframes FadeOut 
{
	0% {opacity:1;}
	80% {opacity:1;}
	100% {opacity:0;}
}

@-ms-keyframes FadeOut 
{
	0% {opacity:1;}
	80% {opacity:1;}
	100% {opacity:0;}
}


/* QUOTE ROWS */

.QuoteLoader
{
	border: 14px solid #4f5154;
	border-top: 7px solid #4f5154;
	border-bottom: 7px solid #4f5154;
	border-radius: 10px;
}

.QuoteLoader > td:first-of-type
{
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}

.QuoteLoader > td:last-of-type
{
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}

.QuoteLoader td
{
	padding:10px 4px;
	overflow:hidden;
}

.QuoteLoader ul
{
	padding: 0;
}

.QuoteLoader td > span
{

	width:99%;
	margin: 0.25%;
	padding: 0.25%;
	float:left;
	margin-bottom: 8px;

}

.QuoteLoader > td:first-of-type > span > span:last-of-type
{
	border-radius: 10px;
    width: 100%;
    overflow: hidden;
    float: left;
}




.QuoteLoader td > span > span:first-of-type
{
	font-weight:600;
}

.CoveredFor
{
	min-width:100px;
}

td.CoveredFor > span
{
	margin-bottom: 4px;
}

.CosttoClient span:last-of-type > span:last-of-type
{
	font-size:160%;
	font-weight:600;
}

.QuoteInformation > span:first-of-type span:last-of-type
{
	font-size:160%;
	font-weight:600;
}

.MobHidden
{
	display:none;
}

.FullScreenReaction
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%!important;
	background: #333;
	opacity: 0.1;
	z-index: 200;
	margin-top:0;
}
	

.SystemOptions
{
	position:fixed;
	right:0;
	bottom:40px;
	width:20px;
	height:20px;
	float:left;
}


/* ========= FULL SCREEN REWRITES ========= */
@media screen and (min-width:700px)
{
	div.ConfirmationPopup > div
   	{
	   	width: 56%;
    	max-width: 500px;
   	}
}

@media screen and (min-width:1100px)
{

	.ToolBar
	{
		width:5%;
		height: 56px;
		display: block;
	}
	
	.ToolBarActive
	{
		height:100vh;
	}
	
	.ToolBarActive + main 
	{
   	 	margin-left: 5%;
	}
	
	.ToolBarActive + dialog 
	{
   	 	margin-left:9.5%;
	}
	
	.TopPageSection
	{
		top:0;
	}
	
	.CurrentContent
	{
		margin-top: 0px;
	}
	
	.Login .CurrentContent
	{
		margin-top:200px;
	}
	
	.CurrentContent > div
	{
		flex-direction: row;
	}
	
	dialog.Menu
	{
		width: 50%;
	}
	
	dialog.Menu > .TopPageSection
	{
		width: 46%;
	}
	
	dialog.Popup 
	{
		width: 86%;
	}
	
	dialog.Popup > .TopPageSection
	{
		width: 82%;
	}
	
	.Tab
	{
		left: 11%;
	}
	
	.SubPageSection
	{
		width: 80%!important;
	}
	
	div.ConfirmationPopup > div
   	{
	   	left: 34%;
   	}
	
	.Notification.BottomMiddle > span
	{
		bottom: 30px;
		margin-left: 20%;
		width: 60%;
	}
	
	
	

	div.p10{width:9%;}
	div.p20{width:19%;}
	div.p25{width:24%;}
	div.p30{width:29%;}
	div.p35{width:34%;}
	div.p40{width:39%;}
	div.p50{width:49%;}
	div.p60{width:59%;}
	div.p65{width:64%;}
	div.p70{width:69%;}
	div.p75{width:74%;}
	div.p80{width:79%;}
	div.p90{width:89%;}
	div.p100{width:99%;}
	
	div.Border.p10, div.Shadow.p10{width:7%; padding:1%;}
	div.Border.p20, div.Shadow.p20{width:17%; padding:1%;}
	div.Border.p25, div.Shadow.p25{width:22%; padding:1%;}
	div.Border.p30, div.Shadow.p30{width:27%; padding:1%;}
	div.Border.p35, div.Shadow.p35{width:32%; padding:1%;}
	div.Border.p40, div.Shadow.p40{width:37%; padding:1%;}
	div.Border.p50, div.Shadow.p50{width:47%; padding:1%;}
	div.Border.p60, div.Shadow.p60{width:57%; padding:1%;}
	div.Border.p65, div.Shadow.p65{width:62%; padding:1%;}
	div.Border.p70, div.Shadow.p70{width:67%; padding:1%;}
	div.Border.p75, div.Shadow.p75{width:72%; padding:1%;}
	div.Border.p80, div.Shadow.p80{width:77%; padding:1%;}
	div.Border.p90, div.Shadow.p90{width:87%; padding:1%;}
	div.Border.p100, div.Shadow.p100{width:97%; padding:1%;}
	
	/* FOR INNER OF POPUP */
	.Popup div.Border.p35, .Popup div.Shadow.p35{width:28%; padding:1%;}
	
	
	
	
	
	
	/*  - STYLING ED HAS ADDED IN -  */
	.FixSubSection
	{
		position: fixed;
	}
	
	/*  - STYLING ED HAS ADDED IN -  */
	.Move
	{
		margin-left: 41%;
	}
	
	
	
	
	
	
	
	
	/* FIX + MOVE */
	div.Fix
	{
		position: fixed;
	}

	/* FIX 35 */
	div.Fix.p35 {width:28%;}
	dialog div.Fix.p35 {width: 25%;}
	div.Fix.p35 + div.Move {margin-left: 38%;}
	
	/* FIX 40 */
	div.Fix.p40 {width:35%;}
	dialog div.Fix.p40 {width: 27%;}
	div.Fix.p40 + div.Move {margin-left: 43%;}
	
	/* FIX 50 */
	div.Fix.p50 {width:43%;}
	dialog div.Fix.p50 {width: 35%;}
	div.Fix.p50 + div.Move {margin-left: 53%;}
	
	
	.Cards
	{
		justify-content: left;
	}
	
	.Card 
	{
    	width: 50%;
    }

	.MobHidden
	{
		display:block;
	}
	
	.LabelContainer > label
	{
    	border-top-right-radius: 0;
		border-bottom-left-radius: 6px;
		border-top-left-radius: 6px;
	}
	
	.after span:last-of-type
	{
		width:10%;
		float:left;
		margin-left:1%;
	}
	
	.thumb
	{
		width:80px;
	}
	
	.circle
	{
		border-radius:50%;
		height:20px;
		width:20px;
		float:left;
		margin:5px;
	}
	
}



































/* ======================== SORT BELOW THIS POINT ========================  */



.DevelopmentSettings
{
	width: 100%;
    margin-top: 0px;
    background: #555;
	position:fixed;
	color:#f9f9f9;
	min-height: 40px;
}

.VehicleInformation,
.information
{
	display:none;
}

.Menu section.container
{
	width: 96%;
	margin: 0;
    margin-left: 2%;
    margin-right: 2%;
}

.BulkContactLead i
{
	background:none;
}

.FullScreenCover
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: #333;
	opacity: 0.9;
	z-index: 200;
	margin-top:0;
}

.FullScreenCover > h2
{
	color: #f9f9f9;
	text-align:center;
	margin-top:20%;
	
}

.FullScreenCover > p
{
	color: #f9f9f9;
	text-align:center;
	margin-top:2%;
}


.DevelopmentInterface
{
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 10px;
    float: left;
    width: 100%;
    
    background-color: #e9e9e9;
}

.DevelopmentInterface > nav
{
	border-radius:0;
	border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    height: 39px;
    background: #444;
}

.DevelopmentInterface > nav > h3
{
	color:#f9f9f9;
	padding-top:10px;
	background: none;
}

.DevelopmentInterface > nav > button
{
	width: 30px;
    height: 30px;
    margin-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: none;
}

.DevelopmentInterface > nav > button > i
{
   font-size: 140%;
    background: none;
    padding: 0;
    margin-left: -2px;
    float: left;
}

.DevelopmentInterface > .FieldContent
{
	padding: 2%;
}

.DevelopmentInterface > .FieldContent > section
{
	margin-bottom: 20px;
} 

.DevelopmentInterface > .FieldContent h3
{
	background: #33333340;
}

.DevelopmentInterface > .FieldContent > .p65,
.DevelopmentInterface > .FieldContent > .p35
{
	width:100%;
}

figure
{
	margin:0;
	overflow:hidden;
	max-height:300px;
}

.border,
dialog .border
{
	-webkit-box-shadow: 0px 0px 0px 4px #333;
	-moz-box-shadow: 0px 0px 0px 4px #333;
	box-shadow: 0px 0px 0px 4px #333;
}

.clear,
dialog .clear
{
	background:none!important;
	color:inherit;
	padding:0;
	
	-webkit-box-shadow: 0px 0px 4px 1px rgba(102,102,102,0)!important;
	-moz-box-shadow: 0px 0px 4px 1px rgba(102,102,102,0)!important;
	box-shadow: 0px 0px 4px 1px rgba(102,102,102,0)!important;
}

.RemoveBorder
{
	border: 0px solid #dbdbdb!important;
}

.seperate
{
	float:left;
	width:99%;
	padding:0.5%;
	padding-bottom:1%;
	margin-bottom:30px;
	background:#f0f0f0;
	
	-webkit-box-shadow: inset 0px 0px 0px 1px #dbdbdb;
	-moz-box-shadow: inset 0px 0px 0px 1px #dbdbdb;
	box-shadow: inset 0px 0px 0px 1px #dbdbdb;
}

.NoticeError
{
	border: 2px solid #ca0909;
    width: max-content;
    height: auto;
    color: #ca0909;
    font-weight: 900;
	padding: 6px;
	margin-top: 15px;
	border-radius: 8px;
}

.loader
{
	-webkit-animation: spin 4s infinite linear;
	z-index:100;
}

@-moz-keyframes spin
{
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes spin
{
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@keyframes spin
{
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}



.InputWarning
{
  background: #ca0909;
  color: #f9f9f9;
  border-radius: 8px;
  padding: 5px;
  text-align: center;
}

.patternGrid
{
	height: 100%;
	text-align: center; 
	background: 
		radial-gradient(circle farthest-side at 0% 50%,#ff8000 23.5%,rgba(240,166,17,0) 0)21px 30px, 
		radial-gradient(circle farthest-side at 0% 50%,#b85c00 24%,rgba(5, 83, 91,0) 0)19px 30px, 
		linear-gradient(#ff8000 14%,rgba(5, 83, 91,0) 0, rgba(5, 83, 91,0) 85%,#ff8000 0)0 0, 
		linear-gradient(150deg,#ff8000 24%,#b85c00 0,#b85c00 26%,rgba(240,166,17,0) 0,rgba(5, 83, 91,0) 74%,#b85c00 0,#b85c00 76%,#ff8000 0)0 0, 
		linear-gradient(30deg,#ff8000 24%,#b85c00 0,#b85c00 26%,rgba(5, 83, 91,0) 0,rgba(5, 83, 91,0) 74%,#b85c00 0,#b85c00 76%,#ff8000 0)0 0, 
		linear-gradient(90deg,#b85c00 2%,#ff8000 0,#ff8000 98%,#b85c00 0%)0 0 #ff8000; 
	background-size:40px 60px;
	color:#65676b;
}

.patternGridGrey
{
	height: 90%;
	text-align: center; 
	background: 
		radial-gradient(circle farthest-side at 0% 50%,#f9f9f9 23.5%,rgba(240,166,17,0) 0)21px 30px, 
		radial-gradient(circle farthest-side at 0% 50%,#e1e1e1 24%,rgba(5, 83, 91,0) 0)19px 30px, 
		linear-gradient(#f9f9f9 14%,rgba(5, 83, 91,0) 0, rgba(5, 83, 91,0) 85%,#f9f9f9 0)0 0, 
		linear-gradient(150deg,#f9f9f9 24%,#e1e1e1 0,#e1e1e1 26%,rgba(240,166,17,0) 0,rgba(5, 83, 91,0) 74%,#e1e1e1 0,#e1e1e1 76%,#f9f9f9 0)0 0, 
		linear-gradient(30deg,#f9f9f9 24%,#e1e1e1 0,#e1e1e1 26%,rgba(5, 83, 91,0) 0,rgba(5, 83, 91,0) 74%,#e1e1e1 0,#e1e1e1 76%,#f9f9f9 0)0 0, 
		linear-gradient(90deg,#e1e1e1 2%,#f9f9f9 0,#f9f9f9 98%,#e1e1e1 0%)0 0 #f9f9f9; 
	background-size:40px 60px;
	color:#65676b;
}

[data-select="MediaImages"]
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	text-align: center;
}

[data-select="MediaImages"] figure
{
	flex-basis: 240px;
	margin: 10px;
	box-shadow: inset 0px 0px 0px 1px rgba(219,219,219,1);
}






.autoFillHighlight
{
	text-decoration:underline;
}

[data-output="PolicyQuotes"] *
{
	list-style-type: none;
}

[data-output="PolicyQuotes"] tr.ConfirmedQuote > td
{
	background:#ff7d01
}

.BankDetailsSpacing 
{
	margin-top:10px;
}


.Message_User > img,
.Message_BusyUser
{
	width:30px;
	height:30px;
	border-radius:6px;
}

.SEOWarning 
{
    color: #D83D45 !important;
    border-bottom: 4px solid #992932;
    text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.SEOLimit {
    font-weight: 700;
}

.AccountAvailabilty_Active
{
	color: #049670;
}

.AccountAvailabilty_Busy
{
	color: #b85c00;
}

.AccountAvailabilty_Offline
{
	color: #D83D45;
}

.MultiSelectBox
{
	text-align: center; 
	content-align: center;
}

.select.MultiSelectBox
{
	background: #ff8000!important;
	height: 100px;
}

.MultiSelectBox option
{
	border-bottom: 1px solid white;
	color: white;
	background-color: #ff8000;
	height: 25px;
}

select[data-multiSelect]
{
	text-align: center; 
	content-align: center;
}

select[data-multiSelect]
{
	height: 200px!important;
}

select[data-multiSelect] option
{
	border-bottom: 1px solid white;
	color: white;
	background-color: #ff8000;
	height: 25px;
}

select[data-multiSelect] > option:checked
{
	color: blue;
	background-color: #ff8000;
}
















.PreviousMonthKey
{
  background:#555
}

.CurrentMonthKey
{
  background:#f81
}

.PreviousMonth > td:first-of-type
{
	-webkit-box-shadow: inset 6px 0px 0px 0px #666, inset 0 0 0 0.4px #f9f9f9;
	-moz-box-shadow: inset 6px 0px 0px 0px #666, inset 0 0 0 0.4px #f9f9f9;
	box-shadow: inset 6px 0px 0px 0px #666, inset 0 0 0 0.4px #f9f9f9;
	padding-left:10px;
}

.CurrentMonth > td:first-of-type
{
	-webkit-box-shadow: inset 6px 0px 0px 0px #ff7d01, inset 0 0 0 0.4px #f9f9f9;
	-moz-box-shadow: inset 6px 0px 0px 0px #ff7d01, inset 0 0 0 0.4px #f9f9f9;
	box-shadow: inset 6px 0px 0px 0px #ff7d01, inset 0 0 0 0.4px #f9f9f9;
	padding-left:10px;
}

.SelectedOption
{
	z-index:2;
	
	display: flex;
	position:absolute;
	
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	
	-webkit-box-shadow: 0px 0px 0px 1px #cdcdcd;
	-moz-box-shadow: 0px 0px 0px 1px #cdcdcd;
	box-shadow: 0px 0px 0px 1px #cdcdcd;
	
	background: #40b440;
	opacity: 0.7;
	
}

.ui-sortable-placeholder
{
	background: #1Db954;
	position: relative;
	width:100%;
	height:140px;
	float:left;
}

.ui-sortable-helper
{
	transform:scale(0.9);
}

.checked
{
	font-size: 340%;
	margin-top: 40px;
	margin-left: 23.5%;
	position: absolute;
	float: left;
	text-align: center;
	z-index: 1;
	background: none!important;
}

.Popup[data-content="SalesScriptSelectScheme"] > section.ContentOptions
{
	z-index:3;
}

.DisabledSwitch
{
	position:relative
}

.DisabledSwitch:after
{
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	content:"\f023";
	position:absolute;
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
	background:#0008;
	color:#fff;
	width:100%;
	height:100%;
}

input.FileUploadInput
{
	display:none;
}

.question > span.FileUploadLabelContainer
{
	width:100%;
}

.question > span.FileUploadLabelContainer i
{
	background:none;
	color:#aaa;
	float:none;
	align-self:center;
	margin-bottom:20px;
	font-size:54px
}

label.FileUploadInput *
{
	transition:150ms ease
}

label.FileUploadInput
{
	position:relative;
	background:#dbdbdb;
	cursor:pointer;
	height:200px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

label.FileUploadInput p
{
	font-size:14px;
	color:#666;
}

label.FileUploadInput b
{
	font-size:14px;
	color:#666;
	font-weight:600
}

label.FileUploadInput:after
{
	content:"";
	position:absolute;
	width:98%;
	height:90%;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	border:2px dashed #aaa;
	transition:150ms ease
}

label.FileUploadInput:hover b
{
	color:#009fd0;
}

label.FileUploadInput.Hovering
{
	background:#ccc;
}

label.FileUploadInput.Hovering:after
{
	border-color:#009fd0;
	width:93%;
	height:85%;
}

label.FileUploadInput.Hovering i
{
	color:#009fd0
}

.FlexCenter
{
	display:flex;
	justify-content:center;
	flex-wrap:space-around;
	width:100%;
}

.RenewalPotentialLead
{
	background:#f9f9f9;
	max-width:300px;
	padding:15px 20px;
	border-radius:6px;
	flex-grow:1
}

.RenewalPotentialLead:not(:last-of-type)
{
	margin-right:20px
}

.RenewalPotentialLead ul
{
	list-style-type:none;
	margin:0 0 15px;
	padding:0
}

.RenewalPotentialLead button
{
	border-radius:6px
}

.Flex
{
	display:flex;
}

.FlexColumn
{
	display:flex;
	flex-direction:column
}

.JustifyBetween
{
	justify-content:space-between
}

dialog.Popup section.ScrollingResponsiveVH
{
	height: 55vh;
}
	
.hidden,
div.hidden,
.MessageContainer.hidden
{
	display:none;
}

.InsurerLogoContainer
{
	position: relative;
	text-align: center;
	color: white;
}

div.DateSelector
{
	width: 100%;
	overflow: scroll;
	max-height: 250px;
}

div.DateSelector > span
{
	background: white;
	width: 88px;
	float: left;
	position: relative;
	
	-webkit-box-shadow: 0px 0px 0px 1px #cdcdcd;
	-moz-box-shadow: 0px 0px 0px 1px #cdcdcd;
	box-shadow: 0px 0px 0px 1px #cdcdcd;
	
	margin:1%;
	
	cursor: pointer;
	
}

p.WeekDay 
{
	color: black;
	font-family: Tahoma;
	background: #ff5757;
	color: white;
	float: left;
	width: 100%;
	padding-top: 10px;
	padding-top: 9px;
	padding-bottom: 10px;
	margin: 0;
	text-align: center;
	font-weight: 600;
	position: relative;
	z-index: 1;
	white-space: nowrap;
	font-size: 80%;
}

p.MonthNumber 
{
	color: black;
	font-size: xx-large;
	margin: auto;
	text-align: center;
	font-weight: 500;
	font-family: Tahoma;
	padding-top: 10px;
	float: left;
	width: 100%;
	padding-bottom: 5px;
	position: relative;
	z-index: 1;
}

p.MonthTitle 
{
	color: black;
	font-size: small;
	margin: auto;
	text-align: center;
	font-weight: 500;
	font-family: Tahoma;
	padding-top: 0px;
	float: left;
	width: 100%;
	padding-bottom: 10px;
	position: relative;
	z-index: 1;
	letter-spacing: 1px;
}


.Perfect > p.WeekDay
{
	background: #40b440;
}

.Good > p.WeekDay
{
	background: #ff7d01;
}


.Black > .MonthNumber
{
	opacity:0.3;
}

.Black > p.WeekDay
{
	background: grey;
	opacity:0.8;
}

#ValidationSectionDisplay
{
	position:fixed;
	bottom:0;
	opacity:0.8;
	background:none;
	margin-left: -210px;
}


.ValidationErrorMessage_Visual
{
	background: #CD3439;
	color: #f9f9f9;
	font-weight: 750;
	padding: 5px;
	border-radius: 8px;
}


#ValElementsErrorList li
{
	
	background: #CD3439;
	color: #f9f9f9;
	font-weight: 750;
	padding: 5px;
	border-radius: 8px;
	margin-bottom:5px;
}

.SupportTicketScreenshotContainer
{
	display:flex;
	justify-content: center;
}

.SupportTicketScreenshotContainer > figure
{
	position: relative;
    cursor: pointer;
    max-width: 35%;
    max-height: fit-content;
		max-height:-moz-fit-content;
    margin-left: 10%;
    margin-top:10px;
    margin-bottom:10px;
}

.SupportTicketScreenshotContainer > figure:last-of-type
{
    margin-right: 10%;
}

.SupportTicketScreenshotContainer > figure:hover
{
	background: #eee;
}

.SupportTicketScreenshotContainer > figure.SelectedImage
{
	background: #f1f1f1;
    box-shadow: 0 0 0 8px #ff7d01cc;
}

.SupportTicketScreenshotContainer > figure.SelectedImage::after
{
    content: "\f058";
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: "Font Awesome 5 Free";
    color: #f1f1f1;
    background: #e2842a8c;
    font-size: 60px;
    height: 100%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

[data-output="MessengerMessage"]
{
	width:75%;
	float:left;
}

[data-output="Messenger"]
{
	width:25%;
	float:left;
}

[data-output="Messenger"] .Contacts
{
	margin:0;
	padding:0;
	width:auto;
	background:#ececec;
	height:auto;
	display: flex;
    flex-direction: column;
	float: left;
}

[data-output="Messenger"] .Contacts [data-label="Filter Users"]
{
	width:100%;
	margin: 0;
}

[data-output="Messenger"] .Contacts .List
{
	width:auto;
	height:64vh;
	padding:0;
	margin:0;
	overflow-y:scroll;
	overflow-x:hidden;
}

[data-output="Messenger"] .List .Contact
{
	list-style-type: none;
	width:100%;
	float:left;
	padding:5px;
}

[data-output="Messenger"] .List .Contact:hover
{
	background:#dedede;
}

[data-output="Messenger"] .List .Profile,
[data-output="MessengerMessage"] .List .Profile
{
	width:35px;
	height:35px;
	border-radius:50%;
	float:left;
}

[data-output="Messenger"] .List .Contact .Status,
[data-output="MessengerMessage"] .List .Message .Status
{
	float: left;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 24px;
    margin-left: -10px;
}

[data-output="Messenger"] .List .Contact .Status.LoggedIn,
[data-output="MessengerMessage"] .List .Message .Status.LoggedIn
{
	background:#1Db954;
}

[data-output="Messenger"] .List .Contact .Status.LoggedOut,
[data-output="MessengerMessage"] .List .Message .Status.LoggedOut
{
	background:none;
}

[data-output="Messenger"] .List .Contact .Name
{
	float:left;
	margin:0;
	margin-top:10px;
	margin-left:8px;
}

[data-output="Messenger"] .List .Contact .LastReceived
{
	float:right;
	margin:0;
	margin-top:10px;
	margin-right:12px;
	color:#1Db954;
}

[data-output="Messenger"] .List .Contact .UnreadAmount
{
	float:right;
	margin:0;
	margin-top:10px;
	margin-left:8px;
	font-size:9px;
	background:#1Db954;
	color:#f9f9f9;
	border-radius:100%;
	padding: 1px;
	padding-right: 5px;
	padding-left: 5px;
	margin-right:10px;
}

[data-output="Messenger"] .List > .UnreadMessages:last-of-type()
{
	border-bottom:1px solid #333;
}

[data-output="Messenger"] .List > .LoggedIn:last-of-type()
{
	border-bottom:1px solid #333;
}

[data-output="MessengerMessage"] .Messages
{
	width:100%;
	display: flex;
    flex-direction: column;
	height:64vh;
	overflow-y:scroll;
}

[data-output="MessengerMessage"] .Messages [data-label="Submit Message"] 
{
	width:100%;
}

[data-output="MessengerMessage"] .Messages [data-label="Submit Message"] span:first-of-type
{
	display:none;
}

[data-output="MessengerMessage"] .Messages [data-label="Submit Message"] span:nth-of-type(2)
{
	width:100%;
	margin:0;
	padding:0;
}

[data-output="MessengerMessage"] .Messages [data-label="Submit Message"] span:nth-of-type(2) > textarea
{
	width:92%;
	margin:2%;
	border:1px solid #333;
	border-radius:6px;
	background:#f9f9f9;
}

[data-output="MessengerMessage"] .Messages .List
{
	width:96%;
	padding:2%;
}

[data-output="MessengerMessage"] .Messages .List .Message
{
	list-style-type: none;
	width:80%;
	float: left;
}

[data-output="MessengerMessage"] .Messages .List .Timestamp
{
	list-style-type: none;
	text-align:center;
	border-bottom:1px solid #333;
	margin-bottom:10px;
	float: left;
    width: 100%;
}

[data-output="MessengerMessage"] .Messages .List .Message .Name
{
	float:left;
	margin-left:10px;
}

[data-output="MessengerMessage"] .Messages .List .Message .Received
{
	float:left;
	margin-left:10px;
	color: #1Db954;
}

[data-output="MessengerMessage"] .Messages .List .Message .Content
{
	clear: both;
	margin-left:10px;
	margin:0;
	width:auto;
	padding:8px;
}


[data-output="MessengerMessage"] .Messages .List .Message.Sender,
[data-output="MessengerMessage"] .Messages .List .Message.Sender .Content,
[data-output="MessengerMessage"] .Messages .List .Message.Sender .Profile,
[data-output="MessengerMessage"] .Messages .List .Message.Sender .Status,
[data-output="MessengerMessage"] .Messages .List .Message.Sender .Received
{
	float:right;
}

[data-output="MessengerMessage"] .Messages .List .Message.Recipient,
[data-output="MessengerMessage"] .Messages .List .Message.Recipient .Content,
[data-output="MessengerMessage"] .Messages .List .Message.Recipient .Received
{
	float:left;
}

[data-output="MessengerMessage"] .Messages .List .Message.Recipient .Content
{
	background:#f9f9f9;
	margin-left: 46px;
	margin-top: -4px;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top-right-radius:10px;
}

[data-output="MessengerMessage"] .Messages .List .Message.Sender .Content
{
	background:#ececec;
	margin-top: -4px;
	border-bottom-left-radius:10px;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}