@media (max-width: 767px) { 	/* if phone */
	
}
@media (min-width: 767px) { 	/* if desktop */
	body {
		display: grid;
		padding: 25px !important;
		grid-template-columns: 1fr 1fr;
	}
	.YearByYearTableContainer {
		grid-column: 1 / 3;
	}
}

::-webkit-scrollbar {
	width: 20px;
	cursor: pointer;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	border-radius: 20px;
	background: #d6dee1;
	background-clip: content-box;
	border: 6px solid transparent;
}

html {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	color: #060606;
	box-sizing: border-box;
	background-color: #EFF2F4;
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.ShareContainer {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 9999;
	cursor: pointer;
	position: fixed;
	place-items: center;
	background-color: rgba(0, 0, 0, .3);
}
.ShareContainer .ContainerContent {
	cursor: default;
	padding: 15px;
	width: 250px;
	border-radius: 15px;
	background-color: #fff;
}
.ShareContainer .ContainerContent .DialogHeader {
	font-size: 26px;
	padding: 7px 10px;
	text-align: center;
	margin-bottom: 20px;
	border-bottom: 1px solid #E5E5E5;
}
.ShareContainer .ContainerContent input {
	width: 95%;
	cursor: text;
	border-radius: 5px;
}
.ShareContainer .ContainerContent .btnGenerate {
	color: #fff;
	cursor: pointer;
	padding: 7px 5px;
	text-align: center;
	border-radius: 20px;
	margin: 20px auto 0 auto;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	background-image: linear-gradient(to right, #5A78F2, #3942DE);
}

.InputContainer,
.OutputContainer,
.YearByYearTableContainer {
	margin: 25px;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 7px 7px 3px 7px;
	background-color: #FFFFFF;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.YearByYearTableContainer {
	box-sizing: border-box;
}			
.YearByYearTableContainer .RowHeader {
	display: grid;
	grid-template-columns: 1fr min-content;
}		
.YearByYearTableContainer .RowHeader div:last-child {
	display: grid;
	grid-gap: 13px;
	grid-template-columns: min-content min-content;
}
.YearByYearTableContainer .RowHeader div:last-child img {
	width: 24px;
}	
.YearByYearTableContainer .RowHeader div:last-child img:hover {
	opacity: 0.6;
	cursor: pointer;
}
#YearByYearTableContainer {
	padding-bottom: 7px;
}
#YearByYearTableContainerScroll {
	overflow-x: auto;
	padding-bottom: 7px;
}
			
.RowHeader {
	font-size: 26px;
	padding: 7px 10px;
	margin-bottom: 16px;
	border-bottom: 1px solid #E5E5E5;
}
.InputContainer .Row,
.OutputContainer .Row {
	width: 100%;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr;
}
.YearByYearTableContainer .YearByYearTable_Row {
	width: 100%;
	display: grid;
	text-align: center;
	align-items: center;
	box-sizing: border-box;
	grid-template-columns: repeat(10, 1fr);
}
.YearByYearTableContainer .YearByYearTable_Row div {
	min-width: 110px;
}
.CategorySplit {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #E5E5E5;
}
.Row div:first-child {
	padding: 5px;
	text-align: right;
}
.Row div:first-child span,
.Row div:last-child span,
.YearByYearTableContainer .YearByYearTable_Row span {
	opacity: 0.7;
	font-size: 12px;
}
.Row div:last-child {
	padding: 5px;
	text-align: left;
}
.Row div:last-child input,
.Row div:last-child select {
	width: 40%;
	border: 0px;
	color: #65676B;
	min-width: 80px;
	padding: 7px 10px;
	border-radius: 20px;
	background-color: #F0F2F5;
}
.Row div:last-child select {
	cursor: pointer;
	min-width: 100px;
	width: calc(40% + 20px);
}
.TwoToOneRow {
	display: grid;
	grid-column: 1 / 3;
	align-items: center;
	justify-content: center;
	grid-template-columns: min-content min-content;
}
.TwoToOneRow input {
	cursor: pointer;
	min-width: 25px !important;
}
.TwoToOneRow span {
	cursor: pointer;
	white-space: nowrap;
}
.AdLinkRow #output_annonse {
	opacity: 0.7;
	font-size: 14px;
	text-align: center;
}
.AdLinkRow #output_annonse:hover {
	opacity: 1;
	cursor: pointer;
}
.AdLinkRow span {
	opacity: 0.7;
	font-size: 12px;
}
.AdLinkRow span:hover {
	opacity: 1;
	cursor: pointer;
}
.AdLinkRow input {
	width: 90%;
	border: 0px;
	color: #65676B;
	min-width: 80px;
	padding: 7px 10px;
	border-radius: 20px;
	background-color: #F0F2F5;
}
.AdLink_Title {
	margin: 5px 0;
	text-align: center;
}
.AdLink_URL {
	text-align: center;
}
.AdLink_Buttons {
	text-align: center;
	margin: 5px 0 10px 0;
}