0dashboard/css/Right.css

.right {
	position: relative; padding-right: 0px; background-color: white; left: 400px;
	width: calc(100% - 400px); box-sizing: border-box; min-height: 100%; border-top: 94px solid #EDF2F5; perspective: 2000px;
}

#Dashboard { position: absolute; right: 80px; top: -83px; white-space: nowrap; }
#Dashboard .dashboard-item {
	text-decoration: none; margin: 5px; padding: 10px 20px; border-radius: 40px; display: inline-block;
	color: rgba(45, 47, 62, 0.72); text-transform: uppercase; font-size: 13px; font-weight: 600; background-color: white;
}
#Dashboard .dashboard-item:active { transform: translateY(1px); }
#Dashboard .status-ok { color: #2ecc71; }
#Dashboard .status-warning { color: #E7A43C; }
#Dashboard .status-bad { color: #e74c3c; }
#Dashboard .status-error { color: #e91e63; }
#Dashboard .status-disabled { color: #aaa; }
#Dashboard .status { transition: all 0.3s }
#Dashboard .dashboard-item.multiuser .status { text-transform: none }
#Dashboard .menu { top: 47px }
#Dashboard .menu-tor .menu-item { white-space: nowrap; }
#Dashboard .menu-donate .menu-item { white-space: nowrap; }
#Dashboard .dashboard-item.newversion { background-color: #35CD76; color: white; }
#Dashboard .dashboard-item.donate { height: 18px; vertical-align: top; padding: 10px 19px; }
#Dashboard .dashboard-item.donate:hover .icon-heart { transform: scale(1.2) }
#Dashboard .dashboard-item.donate:hover .icon-heart:before, #Dashboard .dashboard-item.donate:hover .icon-heart:after { background-color: #FA6C8D }
#Dashboard .warnings { color: #e91e63 }
#Dashboard .menu-warnings { white-space: normal; max-width: 300px; }
#Dashboard .tracker-status { text-align: right; width: 600px; display: inline-block; float: right; margin-top: -20px }
#Dashboard .menu-port { white-space: normal; max-width: 500px; }

#Dashboard .menu .status {
	text-transform: uppercase; text-transform: uppercase; font-weight: bold;
	border: 1px solid; padding: 2px 5px; margin: 0px 5px; font-size: 75%; vertical-align: 1px;
}
/*#Dash .port_checking .status:after {
	background: transparent url(../img/loading-circle.gif) no-repeat center center; backface-visibility: hidden; content: "";
	display: inline-block; background-color: rgb(45, 47, 62); width: 25px; height: 25px; border-radius: 60px; position: absolute; margin-left: -32px; margin-top: -2px;
}*/

.FeedContainer a:active { background-color: rgba(0,0,0,0.05); outline: 2px solid rgba(0,0,0,0.05) }
.FeedContainer a.nolink:active { background-color: initial; outline: initial }
.FeedContainer.faded { opacity: 0.2 }

.FeedContainer .notifications { margin-bottom: 40px; position: relative; transition: all 0.6s ease-in-out; }
.FeedContainer .notifications.empty { margin-bottom: 0px; }
.FeedContainer .notification { padding: 25px; background-color: #e7eff5; font-weight: lighter; background: linear-gradient(75deg, #ede7f0,#e9eef5); }
.FeedContainer .notification .site { color: #4c4c4c; font-weight: bold; margin-right: 15px; }
.FeedContainer .notification .reason { display:inline-block; background-color: #ffffff; padding: 5px 15px; max-width: calc(100% - 55px); }
.FeedContainer .notification .reason .title { font-weight: bold; color: black; }
.FeedContainer .notification .reason:before {
	content: ""; display: inline-block; margin-left: -33px; position: absolute;
	border: 12px solid transparent; border-right: white 12px solid;
}
.FeedContainer .notification .hide { padding: 5px; text-decoration: none; color: #333; float: right; margin-top: -6px;  }
.FeedContainer .notification .hide:hover { color: #9760F9; }

.feeds-filters { margin-top: -25px; margin-left: 25px; max-width: 100% }
.feeds-filter { padding: 5px 15px; color: #5d5d5d; text-transform: uppercase; font-size: 13px; text-decoration: none; margin-right: 5px; opacity: 0.6; transition: all 0.3s; border-bottom: 2px solid rgba(0,0,0,0); display: inline-block }
.feeds-filter.active { opacity: 1; border-bottom: 2px solid #ae4dff }
.feeds-filter:hover { transition: none; opacity: 1 }

.feeds-search { max-width: 820px; box-sizing: border-box; padding-left: 190px; margin-top: 30px; position: relative; margin-right: 50px }
.feeds-search input { padding: 10px; padding-left: 35px; border: 1px solid #eee; width: 100%; font-family: Roboto; font-size: 16px; font-weight: 100; line-height: 20px; transition: all 0.3s; border-radius: 30px }
.feeds-search input::-ms-clear { display: none }
.feeds-search input:focus { outline: none; border-color: #A468F4; }
.search-clear { position: absolute; right: -37px; margin-top: 9px; text-decoration: none; color: #AAA; font-size: 14px; background-color: #F6F6F6; width: 25px; text-align: center; height: 25px; border-radius: 20px; line-height: 25px; }
.search-noresult { text-align: center; margin: 100px 50px; font-family: Roboto; font-weight: 100; font-size: 18px; }

.search-info { right: -30px; color: #AAA; position: absolute; font-size: 13px; margin-top: 14px; text-decoration: none; transition: all 0.3s }
.loading .search-info { opacity: 0 }
.searched .search-info { right: 0px; }
.search-info-stats { padding-left: 30px; padding-top: 10px; }
.search-info-stats td, .search-info-stats th { padding: 5px 11px; font-family: monospace; font-size: 12px; border-bottom: 1px solid #EEE; text-align: left }
.search-info-stats .taken { text-align: right }
.search-info-stats .extra-slow .taken { background-color: #FFE9E2 }
.search-info-stats .slow .taken { color: #FF5722 }

.search-help {
	text-align: right; font-size: 13px; padding-top: 8px; position: absolute; width: 100%;
	margin-left: -152px; color: #AAA; opacity: 0; pointer-events: none; transition: all 0.3s;
}
.search-help code { background-color: #FEFEFE; padding: 2px 5px; border: 1px solid #EEE; font-family: monospace; font-size: 85%; border-radius: 5px; }
.feeds-search input:focus ~ .search-help { opacity: 1; }


.feeds-line { position: absolute; border-right: 1px solid #eee; height: 100%; left: 174px; top: 0px; z-index: -1; }
/*.loader { background: url("../img/loading-ring.gif") no-repeat; width: 28px; height: 28px; position: absolute; right: -30px; top: -30px }*/
.FeedList { margin-top: 50px; position: relative; max-width: 820px; overflow: hidden }
.FeedList.loading { opacity: 0.5; transition: all 1s ease-out }
.FeedList .feed { display: block; padding: 15px; margin-bottom: 40px; padding-left: 200px }
.FeedList .feed .dot { display: none; font-size: 181%; line-height: 0px; vertical-align: -5px; margin-right: 5px; color: #74BBFE; }
.FeedList .feed.new .dot { display: inline; }
.FeedList .feed a { text-decoration: none }
.FeedList .feed a:hover { text-decoration: underline }
.FeedList .feed .type { color: #999; margin-right: 5px }
.FeedList .feed.mention .type { background-color: #fffcdd; outline: 2px solid #fffcdd }
.FeedList .feed .more {
	text-align: center; font-size: 80%; color: #26c281; background: linear-gradient(#EFEFEF 0%, #FFF 10%);
	border-top: 1px solid #E4E4E4; display: block; padding: 10px; margin-top: 10px;
}
.FeedList .feed .details { position: absolute; font-size: 110%; left: 0px; width: 150px; text-align: right }
.FeedList .feed .circle {
	width: 9px; height: 9px; border: 2px solid #af3bff; position: absolute; pointer-events: none;
	margin-left: -32px; border-radius: 15px; margin-top: 5px; background-color: white;
}
.FeedList .feed .title-container { -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; }
.FeedList .feed .title { font-size: 110%; color: #222; }
.FeedList .feed .added { font-size: 80%; color: #AAA; margin-top: 9px; }
.FeedList .feed .site { font-weight: bold; color: #555 }
.FeedList .feed .body {
	color: #8A8A8A; line-height: 24px; font-size: 15px;
	margin-top: 9px; white-space: pre-line; max-height: 3em; text-overflow: ellipsis; overflow: hidden; position: relative;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box;
}
.FeedList .feed .body b { color: #666 }
/*.FeedList .feed .body:before { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(transparent 46px, transparent 0px, white 94%) }*/
.highlight { background-color: #F5E6D4; outline: 2px solid #F5E6D4; }

.welcome { text-align: center; margin-top: 50px; max-width: 1170px }
.welcome h1 {
	font-size: 400%; color: #7C7DBC; margin-top: 20px;
	background: -webkit-linear-gradient(left, #64E6E3, #965FF9 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
/*.welcome h1 .zeronet {  color: #9B63D0; }*/
.welcome h2 { font-size: 20px; margin: 8px; text-transform: uppercase; opacity: 0.7; }
.welcome h3 { color: #333; padding-left: 20px; }
.welcome .served {
	background-color: #AF3BFF; display: inline-block; padding: 10px; color: white; margin-top: 10px;
	background: linear-gradient(45deg, #8041F1, #B149F7); font-weight: lighter; font-size: 18px; line-height: 24px;
}
.welcome .sites { padding: 40px 20px; margin-top: 50px; text-align: left }
.welcome .site {
	width: 32.3%; background-color: #eee; height: 229px; text-align: left; padding: 30px; box-sizing: border-box; font-size: 47px; position: relative;
    color: white; font-weight: 300; border-radius: 2px; box-shadow: 0px 4px 21px -9px #666; display: inline-block; text-decoration: none; margin: 0.5%;
    transition: all 0.4s ease-in; box-shadow: 0px 4px 21px -9px #666, inset 0px 0px 0px 0px rgba(255,255,255,0); transform: translateY(0px)
}
.welcome .site:hover { box-shadow: 0px 3px 21px -4px #888, inset 0px 0px 0px 9px rgba(255,255,255,0); transform: translateY(-3px); transition: all 0.2s ease-out; }
.welcome .site:hover .visit { background-color: rgba(255, 255, 255, 0.33); transition: none }
.welcome .description { font-size: 14px; text-transform: uppercase; opacity: 0.8; font-weight: normal; margin-top: 6px; letter-spacing: 0.5px; position: absolute; width: 85%; }
.welcome .visit {
	position: absolute; bottom: 17px; right: 20px; font-size: 13px; text-transform: uppercase; transition: all 0.3s;
	background-color: rgba(255, 255, 255, 0.16); padding: 8px 16px; border-radius: 20px; font-weight: bold;
}
.welcome .site-zeroboard { background: radial-gradient(circle at 2.00% -2.01%, hsla(152,31%,51%,1), transparent 100%),radial-gradient(circle at 98.00% 50.04%, hsla(188,44%,51%,1), transparent 100%); }
.welcome .site-zeroblog { background: linear-gradient(-45deg, #358AC7, #A176B6); }
.welcome .site-zerotalk { background: linear-gradient(45deg, #9F63BF, #E2556F) }
.welcome .site-zeromail { background: linear-gradient(-25deg, #C04848 -40%, #4A569D) }
.welcome .site-zerome { background: linear-gradient(-45deg, #F39963, #F7417D) }
.welcome .site-zerosites { background: linear-gradient(33deg, #1bb2d4, #7eca26) }

@media only screen and (max-width: 1250px) {
	.welcome .site { width: 49%; }
}