/* ALL NON-MOBILE */

/* chatgpt breakpoints
Nokia T10 portrait	min-width: 480px and max-width: 600px and orientation: portrait
Phone landscape	min-width: 600px and max-height: 500px and orientation: landscape
Tablet / Shared LS	min-width: 600px and orientation: landscape
iPad Mini landscape only	min-width: 768px and max-width: 1080px and orientation: landscape
Desktop	min-width: 1200px
*/

/* NOKIA T10 */
@import url("t10.css");


/* ### IPAD, PHONE AND DESKTOP LANDSCAPE ### */
@media only screen and (min-width: 768px) and (orientation: landscape) {
.progress-wrapper{
	display: none;
}
	
.nomobile {
	display: flex;
}

#e_nextevent, #e_prevevent {
	display: none;
}

#mItin #e_formmf_editdel {
	 display: flex;
}


#css_test {
	background-color: red; 
}

.icon-bar-desktop {
	width: 54px;
	background-color: transparent;  /* rgb(0, 43, 54); */
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999;
	height:100%;
}

.icon-bar-desktop a {
	display: block;
	text-align: center;
	padding: 12px;
	/* transition: all 0.3s ease;
	color: white; */
	font-size: 22px;
	cursor: pointer;
}

.icon-bar-desktop a>span {
	/* opacity: .9;
	mix-blend-mode: difference; */
}

.icon-bar-desktop a:hover {
	background-color: #000;
}

.icon-bar-mobile, .icon-bar-comics, #bigadd  { display: none; }
.icon-bar-desktop { display: block; }

.comic-body {
  padding-bottom: 0;
}



body { font-size: 16px; }

/* .showDesktop, #f_pages, #f_filter, #f_add { display: block; }
.showMobile { display: none; } */
.checkmark {
	top: 2px;
	left: 0;
	height: 16px;
	width: 16px;
}
.todocheck .checkmark:after, .transcheck .checkmark:after {
	left: 5px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #1e0000;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.roundmark {
	position: absolute;
	top: 5px;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #eee;
	border-radius: 50%;
}
.todoradio .roundmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.sepgrid-xaxxxaction { 	grid-template-columns: 30px auto 140px 40px 120px; }
.sepgrid-xaaction { 	grid-template-columns: 30px auto 80px; }
.disp_event_section { display: inline-block; }
.disp_event_link { display: block; }
.dot { height: 12px;  width: 12px; }
.form-control, .input-group-append { 
	height: 42px;
}

.showactionbar {
	display: grid!important;
}


.form-group {
	margin-bottom: 1rem;
}

.fitBoth {
	max-height: 100%;
}


#mPension .form-group,
#mPerx .form-group,
#mWages .form-group,
#tbFilter .form-group {
	margin-bottom: 0;
}

.results, #f_results, #y_results, #ly_results, #bp_results, 
#mPension #budget, 
#mPerx #perxResults, 
#mWages #wagResults,
#rec_display {
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 450px;
}
#mPension #penResults {
	overflow-x: scroll;
	overflow-y: hidden;
	max-width: 850px;
}
#mPensionBody #p_results {
	display: grid;
	grid-template-columns: 3fr 7fr;
	grid-column-gap: 10px;
	grid-template-areas: "pensettings penresults";
	overflow-y: hidden;
}
#penSettings, #penResults {
	display: block;     /* both visible side by side */
}

/*.add-button { display: none; }  , .mobilenavbar 0*/

.area-todo {
	height: calc(100vh - 30px);
	width: calc(100vw - 60px);
	overflow-y: scroll; 
}

.disp_event_title {
	overflow: hidden;
}
	
.col-2 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 16.6666666667%;
	flex: 0 0 16.6666666667%;
	max-width: 16.6666666667%;
	float:left;
}

.col-6 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
	float:left;
}

.col-10 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 83.3333333333%;
	flex: 0 0 83.3333333333%;
	max-width: 83.3333333333%;
	float:left;
}

.col-12 {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%
}

/* budget */
#budget-body {
	display: grid;
	grid-template-rows: 10vh auto;
	grid-template-columns: 5fr 5fr;
	/* grid-template-columns: 20px 1fr 1fr 20px; */
	grid-column-gap: 10px;
	grid-template-areas: "header header" "account1 account2";
	padding-right: 50px;
}

.account {
	overflow-y: scroll;
	max-height: calc(90vh - 20px);
	clear: both; 
}


.account .tdate { width: 110px; display: table-cell; }
.account .tshortdate { width: 0; display: none; }
.account .ttitle {  }
.account .tcat { width:150px; font-style:italic; font-size: 11px; text-transform: lowercase;  display: table-cell; }
.account .tamt { width:80px; text-align:right; display: table-cell; }
.account .tconf { width:20px; display: table-cell; }

.balance {
	display:inline;
}

#artist_bg, #christmas_bg { display: block; }

#playing_fact { 
	display: block; 
	bottom: 40px;
	top: auto;
}

#bgCover {
	position: fixed;
	width: 150px;
	height: 150px;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	left:20px;
	padding: 0;
	bottom: 100px;
}

#mvVideo {
	/* top: 0;
	height: 100vh; */
	visibility: visible;
}

.plcontent {
	height: 75px;
	width:100%;
	padding-left: 20px;
	background: rgba(0, 0, 0, 0.85);
}

.plalbums {
	height: 75px;
}

.songline {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  justify-content: flex-start;
  text-align:left;
  gap: 5px;
  margin-left: 0;
}

#mp3_playing_artist {
	font-weight: bold; 
	font-size: 1.3em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 auto;
	min-width: 0;
}

#mp3_playing_song {
	font-weight: bold; 
	font-size: 1.3em;
	/* white-space: nowrap;  */
	white-space: normal;         
    overflow: visible;           
    text-overflow: unset;
	flex: 0 0 auto; 
	min-width: 0;
}

#mp3_tracktime, #mp4_playing_song  {
	font-weight: bold; 
	font-size: 1.3em;
}


#mp3_tracktime {
	font-size: 1em;
}

#mp3_delbut { 
	display: inline; 
}

/* #mp3_ffbut, #mp3_playbut, #mp3_rrbut {
	font-size: 22px;  
} */

#mp3_tracktime { 
	display:inline;
}

.mycontrols {
	/*justify-content: flex-start;  align items at start, no extra gap */
	font-size: 1em;
	position: relative;
	bottom: auto;
	width: auto;
	margin: 2px 0 15px 0;
	display: inline-flex;   /* Shrinks to fit content */
	gap: 10px; 
	padding: 0;
}

.mycontrols > * {
	flex: 0 0 auto; /* prevents children from stretching */
}

/* todo edit form  */
#mToDo #c_id,
#mToDo #t_url,
#mToDo #t_date_type,
#mToDo #t_start,
#mToDo #t_recur,
#mToDo .btn-outline-secondary,
#mToDo .input-group-append
 { display: inline-block; }


/* 
.mp3 {
	top: 40px; 
}

.mp4 {
	top: 120px;
}
*/

/* .mycontrols > #mp3_rrbut,
.mycontrols > #mp3_playbut,
.mycontrols > #mp3_ffbut,
.mycontrols > #mp3_delbut {
  width: 30px;
  cursor: pointer;
}

.mycontrols > div {
  text-align: left;
} */

/*.mycontrols {
 	width: 300px;
	display: grid;
	grid-template-columns: 140px 40px 40px 40px 40px;
	gap: 0;
	align-items: end;
	justify-content: left;
	align-content: center;
	justify-items: start;
	margin: 0;
	padding-top:40px;
	position: relative; 

}*/
/* 
.mycontrols>div {
	position: inherit; 
	paddin-top:5px;
}

.mycontrols div:nth-of-type(2) { left: 0; } 
.mycontrols div:nth-of-type(3) { left: 0; }
.mycontrols div:nth-of-type(4) { left: 0; }
 */
 



#calitin, #calendar {
	width: calc(100% - 65px); 
}

#calitin .fc-event-main { 
	font-size: 0.8rem; 
	line-height: 1.1rem; 
}

.ctitle { 
 	font-size: 0.8rem; 
	line-height: 1.3rem; 
}

.eventicon { 
	font-size: 16px!important; 
}

.packing, .addused { display: block; }	/* sbicon, . */

.addused {
	display: inline-flex; 
	vertical-align: text-bottom; 
	font-size: 24px!important; 
	padding-right: 3px;

}

#logYear { font-size: 14px; }

.mediaicon {
	font-size: 22px;
	/* vertical-align: top;
	font-family: "Material Icons Outlined"; */
}

.pmcover { 
	display:block;
}

.pm_details {
	margin-left: 190px;
	margin-top: 10px;
}

#pmImage.rotate90 img {
  transform: none;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
}

.fc-button {
	font-size: 1em!important;
}

.fc .fc-col-header-cell-cushion {
    font-size: 1em!important;
}

.oplop-item-details {
	/*grid-template-columns: 10% 40% 10% 40%;*/
	grid-template-columns: auto 1fr auto 1fr;
}

/* Section A */
.detail-row:nth-child(1) > span {
	grid-column: 2;
}

.detail-row:nth-child(1) > button {
	grid-column: 1;
}

/* Section B */
.detail-row:nth-child(2) > span {
	grid-column: 4;
}

.detail-row:nth-child(2) > button {
	grid-column: 3;
}

/* Section C */
.detail-row:nth-child(3) > span {
	grid-column: 1 / 4;
}

.detail-row:nth-child(3) > button {
	grid-column: 4;
}

} /* END DESKTOP/IPAD */

/* ### IPAD ONLY ### */
@import url("ipad.css");

/* ### DESKTOP ONLY ### */
@import url("desktop.css");