/* THE CLASS NAMES FOR THE MODALS ARE:
	log waste modal: logwaste-popup
	aside menu: aside-popup
	confirmation modal: confirmation
	*/


/* App views backgroud */
body{
    font-family: 'Asap', sans-serif;
}

body.LoginCtrl-page {
    background-color: #278518;
}

body.ShoppingListCtrl-page {
    background-color: white;
}

body.ReportCtrl-page {
    background-color: white;
}

body.HistoryListCtrl-page {
    background-color: white;
}

/* Side menu */
.aside-popup .modal-content{
	width: 80vw;
	max-width: 400px;
}

.aside-popup .modal-dialog .side-menu-header {
	position: fixed;
	top: 0;
	width: 80vw;
	max-width: 400px;
	height: 30vh;
	background-color: green;
	z-index: 99;
}

.aside-popup .modal-dialog img {
	margin-top: 7vh;
	margin-left: 2.3vh;
	border-radius: 100%;
	border: white solid 2px;
	height: 11.7vh;
	width: 11.7vh;
}

.aside-popup .modal-dialog h3 {
	margin: 0;
	color: white;
	font-size: 2.3vh;
	padding-left: 2.3vh;
	padding-bottom: 2.3vh;
}

.aside-popup .modal-dialog h2 {
	margin: 0;
	color: white;
	font-size: 4.5vh;
	padding-left: 2.3vh;
	padding-bottom: 2vh;
}

.aside-popup .modal-dialog ul {
	display: block;
	list-style-type: none;
	text-decoration: none;
	font-size: 15px;
	padding: 0;
	margin: 0;
}

.aside-popup .modal-dialog a {
	text-decoration: none;
	display: block;
	padding: 15px;
	color: black;
	border-top: gray solid 1px;
}

.aside-popup .modal-dialog li:last-child {
	border-bottom: gray solid 1px;
}

.aside-popup .modal-dialog #shared-list li {
	margin-top: 10px;
	margin-left: 25px;
	font-size: 15px;
}

.aside-popup .modal-dialog #shared-list .list-item {
	height: 25px;
}

.aside-popup .modal-dialog #aside-footer {
	position: fixed;
	bottom: 0;
	z-index: 97;
	height: 70px;
	width: 80vw;
	max-width: 400px;
	background-color: white;
}

.aside-popup .modal-dialog #aside-content {
	margin-bottom: 70px;
	margin-top: 30vh;
}

.aside-popup .modal-dialog #feedback-icon {
	background-image: url('../../images/icons/share.png');
	background-position: right;
	background-repeat: no-repeat;
	background-size: 30px;
}

.aside-popup .modal-dialog .add-list {
	margin-top: 20px !important;
	border-bottom: none !important;
}

.aside-popup .modal-dialog .add-list input {
	border: none;
}

.aside-popup .modal-dialog .add-list img {
	margin: 0;
	width: 25px;
	height: 25px;
	margin-bottom: 2px;
}

.aside-popup .modal-dialog #sign-out {
	font-size: 15px;
	padding: 0;
	margin:0;
	width: 80vw;
	max-width: 400px;
	text-align: center;
	position: fixed;
	bottom: 0;
}

.aside-popup .modal-dialog #sign-out a {
	border: none;
	color: red;
	cursor: pointer;
}

.aside-popup .modal-dialog #version {
	font-size: 8px;
	color: gray;
	padding: 0;
	margin:0;
	width: 80vw;
	max-width: 400px;
	text-align: center;
	position: fixed;
	bottom: 0;
}

/*.shareList-popup .modal-dialog {*/
	/*width: 80vw;*/
	/*height: 50vh;*/
	/*margin-left: auto;*/
	/*margin-right: auto;*/
	/*max-width: 1300px;*/
	/*background-color: white;*/
/*}*/

.shareList-popup h4 {
	border:none;
}

.shareList-popup .modal-content {
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
	max-width: 1300px;
	background-color: white;
	text-align: center;
}

.shareList-popup .enter {
	display: inline-block;
	margin:auto;
}

/* Log waste popup */
.logwaste-popup .modal-content {
	/*margin-top: 40vh;*/
	border-radius: 10px;
}

.logwaste-popup .modal-dialog {
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
	max-width: 1300px;
}

.logwaste-popup .modal-dialog h4 {
	font-size: 3vh;
	text-align: center;
	padding: 3vh;
}

.logwaste-popup .modal-dialog input {
	font-size: 3vh;
	margin: 3vh;
}

.logwaste-popup .modal-dialog button {
	font-size: 3vh;
	border: none;
	background-color: green;
	color: white;
	display: inline-block;
	width: 50%;
	height: 7vh;
	border-bottom-left-radius: 10px;
	margin-top: 3vh;
}

.logwaste-popup .modal-dialog #ask-later-btn {
	float: right;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 10px;
	border-left: white solid 1px;
}

.logwaste-popup .modal-dialog #cancel-btn {
	float: right;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 10px;
	border-left: white solid 1px;
}

.logwaste-popup p {
	font-size: 3vh;
	margin: auto;
	text-align: center;
}

.logwaste-popup h4 {
}

/* Styling for the slider bar*/
.logwaste-popup .input-slider {
	height: 6vh;
}

.logwaste-popup input[type=range]{
	-webkit-appearance: none;
	width: 70vw;
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	cursor: pointer;
}

/* the track for google*/
.logwaste-popup input[type=range]::-webkit-slider-runnable-track {
	height: 1px;
	box-shadow: 0 5px 30px #000;
	margin-top: 3.5vh;
	margin-bottom: 3.5vh;
	background-color: black;
	max-width: 1000px;
	cursor: pointer;
}

/* the track for firefox*/
.logwaste-popup input[type=range]::-moz-range-track {
	width: 11.7vh;
	height: 1.1vh;
	background-color: black;
	cursor: pointer;
}

/* the thing you grab to slide for google*/
.logwaste-popup input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: none;
	height: 3.8vh;
	width: 3.8vh;
	border-radius: 50%;
	background: green;
	margin-top: -1.9vh;
	cursor: pointer;
}

/* .logwaste-popup input[type=range]::-moz-range-thumb { */
/* the thing you grab to slide for firefox*/
input[type=range]::-moz-range-thumb {
	border: none;
	height: 3.8vh;
	width: 3.8vh;
	border-radius: 50%;
	background: green;
	margin-top: -1.9vh;
	cursor: pointer;
}

/* Archive confirmation pop up */
.confirmation .modal-content {
	/*margin-top: 40vh;*/
	border-radius: 10px;
}

/*.confirmation .modal-dialog {*/
	/*width: 80vw;*/
	/*margin-left: auto;*/
	/*margin-right: auto;*/
	/*max-width: 1300px;*/
/*}*/

.confirmation .modal-dialog h4 {
	font-size: 3vh;
	text-align: center;
	padding: 3vh;
	padding-bottom: 2vh;
}

.confirmation .modal-dialog p {
	text-align: center;
}

.confirmation .modal-dialog button {
	font-size: 3vh;
	border: none;
	background-color: green;
	color: white;
	display: inline-block;
	width: 50%;
	height: 7vh;
	border-bottom-left-radius: 10px;
	margin-top: 3vh;
}

.confirmation .modal-dialog #no-btn {
	float: right;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 10px;
	border-left: white solid 1px;
}

#detailReport-popup {
	width: 90vw;
}

/* Centre modals vertically */
.modal {
	text-align: center;
	padding: 0!important;
}

.modal:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -4px; /* Adjusts for spacing */
}

.modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	max-width: 90vw;
}


