body {
	background: #ffffff;
	font-family: 'Calibri';
	font-size: 18px;
}


div.mycontainer {
    border-radius: 10px;
    background-color: #f2f2f2;
    padding: 15px;
	//margin-top: 40px; 
	margin-bottom: 40px;
	box-shadow: 2px -1px 8px 0px rgba(0,0,0,0.37);
}



a.nav-link.dashbrd {
	border-top-color: #b3d7ff !important;
	border-left-color: #b3d7ff !important;
	border-right-color: #b3d7ff !important;
	color: #138496 !important;
}

a.nav-link.dashbrd.active {
	border-color: #138496 !important;
	color: #138496 !important;
	font-weight: bold !important;
}

ul.nav.dashbrd {
	border-color: #138496 !important;
}



/* Για το autocomplete που έχουμε βάλει στο πεδίο fullname της αναζήτησης. */
.ui-autocomplete {
	font-family: 'Calibri';
}


button.menu_button:hover {
	color: white !important;
    background-color:#a6251f !important;
	border-color:#a6251f !important;
}


button.left_pane_btn {
	border-color:#a6251f !important;
}

button.left_pane_btn:hover {
	color: white !important;
	background-color:#a6251f !important;
	border-color:#a6251f !important;
}

button.left_pane_btn:hover {
	color: white !important;
}



.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
    top: 0.1rem !important;
    left: -2rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

.custom-control-lg .custom-control-label {
    margin-left: 0.5rem !important;
    font-size: 1rem !important;
}


.edit_descr, .save_descr {
	cursor: pointer;
}

/* Αυτό χρειάζεται για να γίνει η αυξομείωση του ύψους όταν πληκτρολογείς στο textarea. */
textarea.form-control {
    resize: none;
    overflow: hidden;
}



/* Breakpoint για να υπάρξει μικρό περιθώριο αριστερά και δεξιά του mycontainer όταν η οθόνη είναι μικρή. Το έχω δοκιμάσει στο κινητό μου και σε οριζόντια και σε κάθετη διάταξη. 
Πρέπει να το δοκιμάσω και σε tablet για να δω πόσο πρέπει να βάλω το max-width.  */
/*
@media only screen (max-width: 299px) {	
	.btn-group {
		width: 70%;
	}
}
*/
/*
@media only screen (min-width: 300px) and  (max-width: 575px) {	
	.btn-group {
		width: 60%;
	}
}
*/

@media only screen and (max-width: 575px) {	
	div.left_pane_text {
		font-size: 16pt;
	}
	
	div.mycontainer_left {
		left: 0%;
		width: 93%;	
		transform: translate(7%, 0%);
	}
	
	div.mycontainer_right {
		position: absolute; 
		transform: translate(-49%, 0%);
		margin-top: 50px;
		width: 90%;
	}
	
	.sticky_offset {
		/* top: 130px;  */
		top: 68px;
	}

/*
	div.search_page {
		left: 0%; 
	}
	
	div.extra_data {
		padding-left: 5px;
	}
		
	div.row_proj_code {
		transform: translate(1%, 0%);
	}
	
	div.row_proj_code_accounts {
		transform: translate(1%, 0%);
	}
	
	iframe {
		height: 350%; 
		width: 100%;
	} */
}




@media only screen and (min-width: 576px) and (max-width: 767px) {
	.sticky_offset {
		/* top: 130px; */
		top: 68px;
	}
	
	div.left_pane_text {
		font-size: 18pt;
	}
	
	img.photography:hover {
		transform: scale(3.0);
		z-index: 2;
		transition: 1s;
		box-shadow: 2px 2px 2px #000;
	}

	.basic_info_episk {
		border-right: 3px solid #eaeaea;
	}
	
	div.mycontainer_left {
		left: 0%;
		width: 93%;	
		transform: translate(7%, 0%);
	}
	
	div.mycontainer_right {
		position: absolute; 
		transform: translate(-26%, 0%);
		margin-top: 50px;
		width: 91%;
	}

	div.search_page {
		//left: 33%; 
		//transform: translate(-50%, 0%);
		left: 0%; 
		//width: 90%;
		transform: translate(-0%, 0%);
	}
	
	div.extra_data {
		padding-left: 35px;
	}
	
	div.row_proj_code {
		transform: translate(17%, 0%);
	}
	
	div.row_proj_code_accounts {
		transform: translate(1%, 0%);
	}
	
	iframe {
		height: 30%; 
		width: 100%;
	}
}



@media only screen and (min-width: 768px) and (max-width: 1999px) {
	.sticky_offset {
		top: 138px; 
		/* top: 82px;  //Αυτό το εφαρμόζουμε όταν τα κουμπιά του οριζοντίου μενού πιάνουν μία σειρά. */
	}
	
	div.left_pane_text {
		font-size: 20pt;
	}	
	
	img.photography:hover {
		transform: scale(3.0);
		z-index: 2;
		transition: 1s;
		box-shadow: 2px 2px 2px #000;
	}

	.basic_info_episk {
		border-right: 3px solid #eaeaea;
	}

	div.mycontainer_left {
		left: 0%; 
	}
	
	div.mycontainer_right {
		position: fixed; 
		transform: translate(66%, 0%);
	}
	
	div.search_page {
		//left: 33%; 
		//transform: translate(-50%, 0%);
	}
	
	div.extra_data {
		padding-left: 35px;
	}
	
	div.row_proj_code {
		transform: translate(17%, 0%);
	}
	
	div.row_proj_code_accounts {
		transform: translate(1%, 0%);
	}
	
	iframe {
		height: 30%; 
		width: 100%;
	}
}



@media only screen and (min-width: 1200px) {
/*	.sticky_offset {
		top: 100px;
	}
*/
	div.row_proj_code_accounts {
		transform: translate(10%, 0%);
	}
}



/*
div.dashboard_container {
    font-family: 'Palatino Linotype';
	border-radius: 10px;
    background-color: #f2f2f2;
    padding: 10px;
	//width: 30%; 
	height: 300px;
	word-wrap: break-word !important;
	display: inline-block;
	margin: 5px;
}
*/


div.dashboard_container {
	//padding-left: 3%;
	//padding-right: 3%;
}


img.top_img_buttons {
	max-width: 30px; 
	max-height: 30px; 
	vertical-align: middle;
}

input[type="text"], input[type="password"] {
    font-family: 'Calibri';
	font-size: 18px;
	padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

select.form-control, textarea.form-control {
	font-size: 18px;
}

input[type="file"] {
	font-size: 18px;
	font-family: 'Calibri';
	cursor: pointer;
}


input[type="submit"] {
	font-family: 'Calibri'; 
	font-size: 18px; 
	height: 34px; 
	cursor: pointer;
}

button {
	//font-size: 16px;
	font-family: 'Calibri';
	//height:  32px;
	cursor: pointer;
}

button.OkOrError {
	font-size: 18px; 
	height:  40px;
	vertical-align: middle;
}

button.left_pane, input.left_pane {
	width: 200px;
	height: 35px;
	vertical-align: middle;
	font-size: 15px; 
}

button.btn_sbm {
	font-size: 18px;
}


a {
	cursor: pointer;
}


/*

@include media-breakpoint-up(md) {
	div.left_pane_text {
		font-size: 1.4rem;
	}
}

@include media-breakpoint-up(lg) {
	div.left_pane_text {
		font-size: 1.6rem;
	}
}
*/

.menu_button {
	font-size: 18px;
	box-shadow: 2px -1px 8px 0px rgba(0,0,0,0.37);
}

.btn-group {
	margin-bottom: 30px; 
	box-shadow: 2px -1px 8px 0px rgba(0,0,0,0.37); 
	border-radius: 4px;
}

.dropdown-toggle {
	font-size: 16px; 
	width: 100%;
}


.cust_panel_button {
	margin-bottom: 30px;
	font-size: 18px;
}




div.right_pane {
	float: right;
	width: 20%;
	margin-top: 220px;
}
/*
td  {
	//background-color: #ffdd99;
	background-color: #ffffff;
	border: 1px solid black;
	padding: 4px;
	text-align: left;
}

th {
	//background-color: #d9b580;
	background-color: #ffffff;
	border: 1px solid black;
	padding: 4px;
	text-align: center;
	cursor: pointer;
}

tr:hover td{
    background-color:#f5f5f5 !important;
}
*/

label {
	float: left;
}



.align_left {
	text-align: left;
}

.align_right {
	text-align: right;
} 

.align_center {
	text-align: center;
}


/* Κλάση που καθορίζει να γίνεται αναδίπλωση κειμένου όταν το κείμενο ενός κουμπιού ξεφεύγει από τα όρια του ίδιου του κουμπιού. */
/* Για κάποιον λόγο δεν δουλεύει καλά. Δεν κάνει, δηλαδή, αναδίπλωση, απλώς κόβει το κείμενο. */
.btn-wrap-text {
    white-space: normal !important;
    word-wrap: break-word !important;
}



/* Style που καθορίζει τα tabs που υπάρχουν στο episkepseis.php. */


.nav-pills .nav-link {
	color:#fff;
	background-color: #2280d7;
	border-radius: 25px 25px 25px 25px;
}

.nav-pills .nav-link.active{
	color:#0370cb;
	background-color:#fff;
	//border-radius: 25px;
	border: 2px solid #2280d7;
}


#med_apps {
	background-color: #009900;
}

#med_apps.active {
	background-color: #ffffff;
	color:#009900;
	border: 2px solid #009900;
}

#treatments {
	background-color: #ff9900;
}

#treatments.active {
	background-color: #ffffff;
	color:#ff9900;
	border: 2px solid #ff9900;
}


#surgeries {
	background-color: #ff4d4d;
}

#surgeries.active {
	background-color: #ffffff;
	color:#ff4d4d;
	border: 2px solid #ff4d4d;
}


#all_episk {
	background-color: #2280d7;
}

#all_episk.active {
	background-color: #ffffff;
	color:#2280d7;
	border: 2px solid #2280d7;
}



.med_app, .treatment, .surgery, .arxeia_istorikou, .genika_arxeia {
	background-color: white; 
	margin-top: 2em; 
	margin-bottom: 2em; 
	border-radius: 5px; 
	box-shadow: 2px -1px 8px 0px rgba(0,0,0,0.37); 
	
}

.med_app {
	border-left: 5px solid #009900;
	cursor: default;
}

.treatment {
	border-left: 5px solid #ff9900;
	cursor: default;
}

.surgery {
	border-left: 5px solid #ff4d4d;
	cursor: default;
}

.arxeia_istorikou {
	border-left: 5px solid #b59aff;
}

.genika_arxeia {
	border-left: 5px solid #fff53b;
}

.basic_info_episk {
	color:#8b8b8b;
}

.small_icons {
	width: 24px; 
	height: 24px;
}

.files_icons, .photos_icons {
	width: 40px; 
	height: 40px;
	cursor: pointer;
}

.file_icon {
	cursor: pointer;
}

.remove_icon, .rotate_left, .rotate_right {
    cursor: pointer;
}

pre {
	font-family: Calibri;
	font-size: 18px;
	/* Αναδίπλωση κειμένου στα pre όταν χρειάζεται. */
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


/* Διαμόρφωση των multiselect checkboxes στα Στατιστικά ώστε να έχουν την μορφοποίηση των απλών input boxes. */
button.btn.dropdown-toggle.btn-light {
	border: 1px solid #ccc;
	background-color: #fff;
	font-weight: bold;
}


button.btn.dropdown-toggle.btn-light.bs-placeholder {
	font-weight: normal;
}


/* Διαμόρφωση των input boxes των Στατιστικών (που αφορούν ημερομηνίες) ώστε να γίνει bold η ημερομηνία που γράφουμε. */
input.date {
	font-weight: bold;
}


/* Εξαιρεί από το bold την περίπτωση να είναι άδειο το κελλί, δηλ. να υπάρχει μόνο το placeholder. 
Οπότε στην περίπτωση αυτή, το placeholder εμφανίζεται με κανονικά γράμματα, ενώ όταν γράψεις κάτι γίνεται bold. */
input:not([class="date"])::-webkit-input-placeholder { /* WebKit browsers */
  font-weight: normal;
}
input:not([class="date"]):-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  font-weight: normal;
}
input:not([class="date"])::-moz-placeholder { /* Mozilla Firefox 19+ */
  font-weight: normal;
}
input:not([class="date"]):-ms-input-placeholder { /* Internet Explorer 10+ */
  font-weight: normal;
}