@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
	font-family: 'Roboto', sans-serif;
}
* {
	margin: 0;
	padding: 0;
}
img{
	draggable: false;
}
i {
	margin-right: 10px;
}
/*----------bootstrap-navbar-css------------*/
.navbar-logo{
	padding: 15px;
	color: #fff;
}
.navbar-mainbg{
	background-color: #5161ce;
	padding: 0px;
}
#navbarSupportedContent{
	overflow: hidden;
	position: relative;
}
#navbarSupportedContent ul{
	padding: 0px;
	margin: 0px;
}
#navbarSupportedContent ul li a i{
	margin-right: 10px;
}
#navbarSupportedContent li {
	list-style-type: none;
	float: left;
}
#navbarSupportedContent ul li a{
	color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 15px;
    display: block;
    padding: 20px 20px;
    transition-duration:0.6s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
}
#navbarSupportedContent>ul>li.active>a{
	color: #5161ce;
	background-color: transparent;
	transition: all 0.7s;
}
#navbarSupportedContent a:not(:only-child):after {
	content: "\f105";
	position: absolute;
	right: 20px;
	top: 10px;
	font-size: 14px;
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	font-weight: 900;
	transition: 0.5s;
}
#navbarSupportedContent .active>a:not(:only-child):after {
	transform: rotate(90deg);
}
.hori-selector{
	display:inline-block;
	position:absolute;
	height: 100%;
	top: 0px;
	left: 0px;
	transition-duration:0.6s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	background-color: #fff;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	margin-top: 10px;
}
.hori-selector .right,
.hori-selector .left{
	position: absolute;
	width: 25px;
	height: 25px;
	background-color: #fff;
	bottom: 10px;
}
.hori-selector .right{
	right: -25px;
}
.hori-selector .left{
	left: -25px;
}
.hori-selector .right:before,
.hori-selector .left:before{
	content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #5161ce;
}
.hori-selector .right:before{
	bottom: 0;
    right: -25px;
}
.hori-selector .left:before{
	bottom: 0;
    left: -25px;
}


@media(min-width: 992px){
	.navbar-expand-custom {
	    -ms-flex-flow: row nowrap;
	    flex-flow: row nowrap;
	    -ms-flex-pack: start;
	    justify-content: flex-start;
	}
	.navbar-expand-custom .navbar-nav {
	    -ms-flex-direction: row;
	    flex-direction: row;
	}
	.navbar-expand-custom .navbar-toggler {
	    display: none;
	}
	.navbar-expand-custom .navbar-collapse {
	    display: -ms-flexbox!important;
	    display: flex!important;
	    -ms-flex-preferred-size: auto;
	    flex-basis: auto;
	}
}


@media (max-width: 991px){
	#navbarSupportedContent ul li a{
		padding: 12px 30px;
	}
	.hori-selector{
		margin-top: 0px;
		margin-left: 10px;
		border-radius: 0;
		border-top-left-radius: 25px;
		border-bottom-left-radius: 25px;
	}
	.hori-selector .left,
	.hori-selector .right{
		right: 10px;
	}
	.hori-selector .left{
		top: -25px;
		left: auto;
	}
	.hori-selector .right{
		bottom: -25px;
	}
	.hori-selector .left:before{
		left: -25px;
		top: -25px;
	}
	.hori-selector .right:before{
		bottom: -25px;
		left: -25px;
	}
}

      @font-face {
        font-family: 'Roboto';
        font-weight: normal;
        font-style: normal;
        src: local('Roboto'), local('Roboto-Regular'), url('https://optifine.net/template/fonts/Roboto-Regular.woff') format('woff');
      }
      @font-face {
        font-family: 'Roboto';
        font-weight: bold;
        font-style: normal;
        src: url('template/fonts/Roboto-Bold.woff') format('woff');
        src: local('Roboto Bold'), local('Roboto-Bold'), url('https://optifine.net/template/fonts/Roboto-Bold.woff') format('woff');        
      }
      @font-face {
        font-family: 'Oswald';
        font-weight: normal;
        font-style: normal;
        src: url('https://optifine.net/template/fonts/Oswald-Regular.woff') format('woff');
      }
      @font-face {
        font-family: 'Oswald';
        font-weight: bold;
        font-style: normal;
        src: url('https://optifine.net/template/fonts/Oswald-Medium.woff') format('woff');
      }
      body {
        font-family:'Roboto', arial, helvetica, sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: medium;
        background-image:url('https://img.icons8.com/?size=50&id=AAmNKo35waRQ&format=png');
		background-color: #2A3269;
      }
      A {
        color: #5168CF; 
        text-decoration: none; 
      }    
      h2 {
        margin-bottom: 0.3em
      }
      .tableRoot {
        margin: 0 auto; 
        min-width: 850px; 
        background-color: white; 
        box-shadow: 0px 0px 20px #CCCCCC;
        border: 0px solid #808080;
        /* Use border-spacing instead of border-collapse, otherwise IE doesn't show the shadow */
        border-spacing:0;
      }
      .header {
        background-color: #313E7C;
        padding-bottom: 0.32em;
      }
      .headerTitle {
        font-family:'Oswald', arial, helvetica, sans-serif;
        font-size:300%; 
        font-weight:bold; 
        padding-left: 20px;
        padding-right: 40px;
        line-height: 1.3em;
      }
      .headerTitle A {
        color: #F0F3FF; 
        text-decoration: none;
      }
      .headerNav {
        text-align: left; 
        background-color: #313E7C;
        border-width: 0px;
        margin-left: 0px
      }
      .headerNav A {
        color: #F0F3FF; 
        text-decoration: none;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.3em;
        padding-bottom: 0.3em;
      }
      .headerNav A:hover {
        background-color: #6974A3;
        transition: .25s;
        text-decoration: none;
      }
      .content {
        padding: 18px;
        padding-top: 10px; 
        text-align: left; 
        text-indent: 0px; 
        margin: 10px;
      }
      .content A:hover {
      }
      .footer {
        font-size:small; 
        text-align: right;  
        background-color: #313E7C; 
        padding-left: 0.3em;
        padding-right: 0.3em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
      }
      .footerIcon {
      }
      .footerIcon IMG {
        margin-bottom: -0.3em;
        margin-right: 0.7em;
        width: 1.2em;
        height: 1.2em;
      }
      .footerText A {
        text-decoration: none;
        padding-left: 0.7em; 
        padding-right: 0.7em;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        color: #F0F3FF;
      }
      .footerText A:hover {
        text-decoration: none;
        background-color: #6974A3;
        transition: .25s;
        color: #F0F3FF;
      }
      .downloads {
        width: 100%
      }
      .spoilerLink {
        line-height: 200%;
      }
      .showAll {
        text-align: center;
        margin-top: 2em;
      }
      .downloadTable {
        border-collapse: collapse;
        width: auto;
        line-height: 200%;
      }
      .downloadLine {
      }
      /* Columns */
      .downloadLine .colFile {
        width: 270px;
        padding-left: 10px;
      }
      .downloadLine .colDownload A,
      .downloadButton A {
        width: 80px;
        text-align: center;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        border: 1px solid #5168CF;
      }
      .downloadLine .colMirror {
        width: 100px; 
        text-align: center;
      }
      .downloadLine .colChangelog {
        width: 110px;
      }
      .downloadLine .colForge {
        width: 115px;
      }
      .downloadLine .colDate {
        width: 80px;
        text-align: right;
        padding-right: 10px;
      }
      /* Preview */
      .downloadLinePreview {
        background-color: #FFF6E3
      }
      /* Main */
      .downloadLineMain:first-child {
        background-color: #F0F3FF
      }
      .downloadLineMain:first-child .colDownload  A, 
      .downloadButton A{
        font-weight: normal;
        color: white;
        background-color: #313E7C;
        border: 1px solid #313E7C;
      }
      .downloadLineMain:first-child .colDownload A:hover,
      .downloadButton A:hover{
        background-color: #6974A3;
        transition: .25s;
      }
      LI STRONG {
        line-height: 200%;
      }
      .tableDownload {
        margin: 0 auto; 
      }
      .tableDonate TR {
        height: 35px;
      }
      .scaleNearest {  
        image-rendering:optimizeSpeed;             /* Legal fallback                 */
        image-rendering:-moz-crisp-edges;          /* Firefox                        */
        image-rendering:-o-crisp-edges;            /* Opera                          */
        image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */
        image-rendering:optimize-contrast;         /* CSS3 Proposed                  */
        -ms-interpolation-mode:nearest-neighbor;   /* IE8+                           */
        image-rendering:pixelated;                 /* Chrome 41+, Firefox            */
      }
      .tableData {
        border-collapse: collapse;
      }
      .tableData th {
        color: #F0F3FF;
        background-color: #313E7C;
        font-weight: normal;
      }
      .tableData, .tableData th, .tableData td {
        border: 0px solid black;
      }
      .tableData th, .tableData td {
        padding-left:10px;
        padding-right:10px;
        padding-top:5px;
        padding-bottom:5px;
      }
      .tableDataDis {
        background-color: #DCDCDC
      }
      .tableDataIcon {
        width: 1.5em;
        height: 1.5em;
      }
      .tableDataCape {
        max-height: 44px;
      }
      .tableDataCentered {
        text-align: center;
      }
      .tableBanner {
        width: 100%;
        padding: 8px;
      }
      .tableBanner TR {
        text-align: center;
        margin: 0.3em;
      }
      .tableBanner TD {
        padding-top: 1em;
      }
      .tableBanner IMG {
        border: 1px solid #f0f0f0;
      }
      .tableBanner TD * {
        margin: 0.3em;
      }
      .tableBanners TR TD {
        padding: 9px;
        padding-right: 8px;
      }
      .tableBanners IMG {
        border: 1px solid #f0f0f0;
      }
      .bannerSelTable {
        width: 100%;
      }
      .bannerSelUser {
        text-align: right;
      }
      .bannerNav {
        text-align: center;
      }
      .bannerNav * {
        margin: 0.3em;
      }
      TD .tableDataEditable {
        background-color: #FFF6E3;
        border: 2px solid transparent;
      }
      input,
      select {
        font-family:'Roboto', arial, helvetica, sans-serif;
        font-weight: normal;
        font-style: normal;
        font-size: medium;
        padding: 2px;
      }
      input[type=submit] {
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
      }
      input[type=checkbox] {
        transform : scale(1.3);
      }

.announcement {
  display: inline-block;
  height: 100%;
  text-align: center;
  width: 100%;
  background: #5161ce;
  color: white;
  font-family: Arial, sans;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-size: 0.8em;
}

.announcement a { 
  color: #ccc; 
}

a:hover {
  color: red;
}