/* Start General CSS */

/* Colours */

:root {
    --header-background: #000000;
	--light-background: #e9e9e9;
	--footer-background: #3b3b3b;
	--button-colour:  #007bff;
	--button-hover-colour:  #0056b3;
	--button-light-colour:  #929292;
	--button-light-hover-colour:  #6c6c6c;
	--white:  #fff;
	--light-color:  #e9e9e9;
	--table-header:  #000000;
	--card-bg:  #ffffff;
	--mobilenav-background:  #000000;
	--mobilenav-background-hover:  rgba(233,233,233,0.8);
	--mobilenav-text-hover:  #333;
	--alert-text: #0c5460;
	--alert-background: #d1ecf1;
	--alert-border: #bee5eb;

	--alert-error-text: #721c24;
	--alert-error-background: #f8d7da;
	--alert-error-border: #f5c6cb;

	--alert-success-text: #155724;
	--alert-success-background: #d4edda;
	--alert-success-border: #c3e6cb;

	--table-border: #333;

}

/* Border Box */

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}




body {
	font-family: "Inter", sans-serif;
	background-color: var(--light-background);
	margin: 0;
	padding: 0;
}


/* Fonts */

h1 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 53px; font-size: 3.3125em; line-height: 1.1; margin: 0px; color: #000000; margin-bottom: 15px;}
h2 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 36px; font-size: 2.25em; line-height: 1.1; margin: 0px;  color: #000000; margin-bottom: 15px;}
h3 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 20px; font-size: 1.25em; line-height: 1.1; margin: 0px; color: #000000; margin-bottom: 15px;}
h4 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 18px; font-size: 1.125em; line-height: 1.1; margin: 0px;  color: #000000; margin-bottom: 15px;}
h5 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 16px; font-size: 1.0em; line-height: 1.1; margin: 0px; color: #000000; margin-bottom: 15px;}
h6 { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 14px; font-size: 0.875em; line-height: 1.1; margin: 0px; color: #000000; margin-bottom: 15px;}

p {color: #3b3b3b; font-family: "Inter", sans-serif; font-optical-sizing: auto; font-size: 16px; font-size: 1em; line-height: 1.5;font-weight: 400; font-style: normal; margin-top: 0px; margin-bottom: 15px;}
 p strong {font-weight: 600;}
a {color: #3b3b3b; font-family: "Inter", sans-serif; font-optical-sizing: auto; text-decoration: none; font-style: normal; }
ul li, ol li, li {color: #3b3b3b; font-family: "Inter", sans-serif; font-optical-sizing: auto; font-style: normal; }
em {color: #3b3b3b; font-family: "Inter", sans-serif; font-optical-sizing: auto; font-style: italic; }


.key {display: flex; flex-wrap: wrap;}
.key-item {width: 25%; margin-bottom: 5px; display: flex; align-items:center;}
.key-item-colour {width: 20%; height: 10px;}
.key-item-text {width:78%; margin-left: 2%;  font-size: 14px; color: #8b8c89;}

/* Colours here */
.key-item-colour.red {background: #d62828;}
.key-item-colour.orange {background: #FB5607;}
.key-item-colour.yellow {background: #FFBE0B;}
.key-item-colour.pink {background: #FF006E;}
.key-item-colour.purple {background: #8338EC;}
.key-item-colour.blue {background: #3A86FF;}
.key-item-colour.green {background: #2a9d8f;}
.key-item-colour.turquoise {background: #2ec4b6;}

header {width: 100%; background: var(--header-background); height:  100px; display:  flex; align-items: center; padding: 20px;}
main {width: 100%; min-width: 320px;  min-height: calc(100vh - 200px); display:  flex; align-items: flexstart; justify-content: center; padding: 35px 20px;}
footer {width: 100%; background: var(--footer-background); height: 100px; display:  flex; align-items: center; justify-content: center; color: var(--white);}


.logo {
    width: 20%;
}
.titleTop {
    width: 60%;
}
.titleTop h2 {
   color: #fff;
   text-align: center;
}
.mobile-nav {display:  block; width:  20%; text-align: right;}




.logo img {width:  150px;}



nav a {color: var(--white); text-decoration: none; display:  inline-block; padding: 10px;}
nav a:hover {color: var(--light-color); text-decoration: underline;}

table {background: var(--white); width: 100%; font-size: 14px;}
table tr th {background: var(--table-header) ; color: var(--white); padding: 15px; text-align: left;}
table tr th a {color: var(--white);}
table tr td {padding: 15px;}
.fc-theme-standard .fc-list-day-cushion {background: var(--table-header);}
.tableheading a {color:#FFFFFF; border: none; border-bottom: 1px dotted;}

.formSpacer {height: 30px;}

.headertext {display:  none;}



.pushy-inner {padding: 30px 0px;}
.pushy {background: var(--mobilenav-background); padding:  0px !important;}
.pushy a {	display: inline-block;
	padding: 8px 16px !important;
	text-decoration: none;
	color: var(--white) !important;
	border-radius: 4px;
	background-color: var(--button-colour);
	border: none;
	text-align: center; margin: 0 auto 20px auto; width: 70%; text-transform: initial !important;}
.pushy a:hover {opacity: 0.8; text-decoration: none; }

form select {-webkit-appearance: none;}

/* End General CSS */

.welcomeBoxes {width:  100%; display:  flex; flex-wrap: wrap;}
.welcomeBox {	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 49%;
margin-right:  2%;
	text-align: left; margin-bottom: 20px;}
.welcomeBox:nth-of-type(even) {margin-right:  0px;}
.welcomeBox:nth-of-type(odd):last-of-type {width:  100%; margin-right:  0px;}

.welcomeBox a {
	display: inline-block;
	padding: 8px 16px;
	text-decoration: none;
	color: #fff;
	border-radius: 4px;
	background-color: var(--button-colour);
	border: none;
	text-align: center;
	width: 100%;
}
.welcomeBox a:hover {
	opacity: 0.8;
}

.form-container {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  min-width: 320px;
	text-align: left;
}
main form {width:  100%; max-width: 1200px; min-width: 320px;}
main form h2 {margin-bottom: 30px;}
main form p a {margin-top: 20px; text-align:  center; display:  block;}

.form-field-container {
	margin-bottom: 15px;
}
.selectpicker {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 20px;
}
.selectpickerSmall {
	width: 46%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 20px;
}
.selectpickerDate {
	width: 33%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 20px;
}
.form-field-container label {
	display: block;
	font-weight: 400;
	margin-bottom: 10px;
}
.form-field-container input[type="text"],
.form-field-container input[type="email"],
.form-field-container input[type="password"],
.form-field-container textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 20px;
}
.form-field-container .radio {
	display: flex;
	align-items: center;
}
.form-submit-container {
	margin-top: 15px;
}
.form-submit-container .btn_blue {
	padding: 10px;
	background-color: var(--button-colour);
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.form-submit-container .btn_grey:hover {
	background-color: var(--button-hover-colour);
}
.form-submit-container .btn_grey {
	padding: 10px;
	background-color: var(--button-light-colour);
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.form-submit-container .btn_blue:hover {
	background-color: var(--button-light-hover-colour);
}
.alert {
	padding: 10px;
	border-radius: 4px;
	margin-bottom: 15px;
	font-weight: 400;
}
.alert-info {
	border: 1px solid var(--alert-border);
	color: var(--alert-text);
	background: var(--alert-background);
}
.alert-error {
	border: 1px solid var(--alert-error-border);
	color: var(--alert-error-text);
	background: var(--alert-error-background);
}
.alert-success {
	border: 1px solid var(--alert-success-border);
	color: var(--alert-success-text);
	background: var(--alert-success-background);
}
.alert a {
	border-bottom: 1px dotted;
}
.addNewUser a {
	display: inline-block;
	padding: 8px 16px;
	text-decoration: none;
	color: #fff;
	border-radius: 4px;
	background-color: var(--button-colour);
	margin-bottom: 20px;
}
.addNewUser a:hover {
	opacity: 0.8;
}
/*#MyDataGridDocs a {
	display: inline-block;
	padding: 8px 16px;
	text-decoration: none;
	color: #fff;
	border-radius: 4px;
	background-color: var(--button-colour);
	border: none;
	text-align: center;
}
#MyDataGridDocs a:hover {
	opacity: 0.8;
}*/
.btn {
	display: inline-block;
	padding: 3px 6px;
	text-decoration: none;
	color: #fff;
	border-radius: 4px;
	background-color: var(--button-colour);
	border: none;
	text-align: center;
}
.s_sqr_btn_grey {
	background-color: var(--button-light-colour);
}
.btn.btnDelete {
	background-color: var(--button-light-colour);
}
.btn.btnReset {
	/*background-color: var(--button-colour);*/
}
.btn.btnEdit {
	/*background-color: #28a745;*/
}
.btn:hover {
	opacity: 0.8;
}
.alignRight {
	float: right;
}
/*table th {
	padding: 10px;
	text-align: left;
	background-color: #f2f2f2;
}
table td {
	padding: 10px;
}
table tr.shaded {
	background-color: #f9f9f9;
}*/

/* Media Queries */

.menu-btn {
  padding: 15px 30px;
}

#customConfirm {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid black;
    padding: 20px;
    z-index: 10000;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

    /* Style for the confirmation message */
    #confirmMessage {
        margin-bottom: 20px; /* Add space between message and buttons */
    }

    /* Style for the OK button */
    #btnOk, #btnCancel {
        display: inline-block;
        cursor: pointer;
        padding: 10px 20px;
        margin: 0 10px;
        background-color: #007bff;
        color: white;
        border: 1px solid #007bff;
        border-radius: 4px;
        transition: background-color 0.3s, color 0.3s;
    }

    /* Hover effect for buttons */
    #btnOk:hover, #btnCancel:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }

@media all and (max-width: 1024px) and (min-width: 0px) {
.selectpickerDate {width: 32%;}
}


@media all and (max-width: 860px) and (min-width: 0px) {
.headertext {display: inline-block; font-weight: 700;}
.welcomeBox {width:  100%; margin-right:  0px;}
.key-item {width: 50%;}
}

@media all and (max-width: 950px) and (min-width: 0px) {
header nav {display:  none;}
.mobile-nav {display:  block;}
}

@media all and (max-width: 600px) and (min-width: 0px) {
.key-item {width: 100%;}
.titleTop h2 {
   display: none;
}
}

@media all and (max-width: 480px) and (min-width: 0px) {
}