/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree ./application
 *= require_self
 */
@import "bootstrap-sprockets";
@import "bootstrap";
@import "select2";
@import "select2-bootstrap";

$header-blue: #1676bc;
$link-grey: #343D3E;

//// HTML/BODY
html,
body {
	margin:0;
	padding:0;
	height:100%;

  font-size: 100%;
	font-weight: 300;
  font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 300;
}

a, a:focus, a:hover {
	font-weight: 400;
	color: #000;
	text-decoration: none;
}

.media-heading {
	font-weight: 400;
}

.caret {
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid #000000;
}
.caret-up {
	transform: rotate(180deg);
}
.caret-align-right {
	position: absolute;
  left: 90%;
  top: 45%;
}

//// HEADER
header {
  border: 0;
  margin-bottom: 16px;

  a, a:focus, a:hover {
    text-decoration: none;
  }

  // barra brasil

	.barra-brasil {
    background:#F1F1F1;
    height: 32px;
    padding:0 0 0 10px;
    display:block;


    #wrapper-barra-brasil {
      max-width: 100% !important;
    }
  }
	.brasil-flag{
		height: 100% !important;
	}
  // bar with logo, search and user info
	.search-bar {
		color: #FFF;
		background-color: #2178F5;
		padding: 0px;
    padding-top: 8px;
		margin: 0px;

    // logo
		.logo-container {
			text-align: left;
		}
		.logo {
      margin-top: 10px;
      padding: 0;
			text-align: center;
			float: left;
			width: 165px;
			h3 {
				margin-top: 10px;
	      font-weight: 400;
			}
      a {
			 color: #FFF;
      }
		}
		.logo-image {
			width: 100px;
		}
    // accessibility
    .search-accessibility {
      margin-top: 25px;
      text-align: right;
      img {
        height: 25px;
      }
    }
    // search
    .search-input {
      margin-top: 40px;
      margin-bottom: 5px;
      text-align: right;

      // text input
      .form-control {
        border-bottom-left-radius: 7px;
        border-top-left-radius: 7px;
        border-color: #FFF;
        -webkit-box-shadow: none;
      	-moz-box-shadow: none;
      	box-shadow: none;
        height: 40px;
        padding-left: 20px;
        font-size: 24px;
        font-weight: 300 !important;
      }
      // button input
      .input-group-btn {
        border-bottom-right-radius: 7px;
        border-top-right-radius: 7px;

        .btn, .btn:focus, .btn:hover {
          height: 40px;
          font-size: 20px;
          color: #FF2602;
          background-color: #FFF;
          border-color: #FFF;
        }
      }

      .search-label {
        font-weight: 300 !important;
        color: #FFF;
      }
    }
    // user info
		.status-text {
      margin-top: 20px;
			// font-size: 20px;
			text-align: right;

			h2, h4 {
				margin-top: 5px;
			}

      .media-heading {
        // font-size: 32px;
        a {
          color: #FFF;
        }
      }
      .register-link {
        color: #CED1C6;
      }
      .quit-link {
        color: #FF2602;
      }
		}
	}

  // navbar
  .navigation {
    background: #F1F1F1;

    .nav {
      height: 50px;

			h3 {
				margin-top: 13px;
			}

      .nav-button {
        min-width: 130px;
        height: 100%;
				padding-left: 15px;
				padding-right: 10px;
        // font-size: 20px;
				color: #343D3E;
        font-weight: 500 !important;

				a {
					@extend h3;
					padding: 0;
					color: #343D3E;
				}
      }

      .nav-button-first {
        padding-left: 0 !important;
      }
      .divider {
        width: 2px;
				margin-left: 3px;
        height: 100%;
        background-color: #FFF;
      }
    }
  }

  // contrast
  .search-bar-contraste{
    background-color: black;
    color: white;
    background-image: none !important;
  }
}


//// FOOTER
footer {
	width:100%;
	height:100px;
	position:relative;
	bottom:0;
	left:0;
  padding-top: 50px;
	border-width: 0px;
	color: #FFF;

	.main{
		background-color: #313131;
		padding: 16px 0px 0px 0px;
    min-height: 256px;
	}

	.footerbar{
		padding: 16px;
		background-color: #080808;
	}
}

.starRating:not(old){
  display        : inline-block;
  width          : 7.5em;
  height         : 1.5em;
  overflow       : hidden;
  vertical-align : bottom;
}

.starRating:not(old) > input{
  margin-right : -100%;
  opacity      : 0;
}

.starRating:not(old) > label{
  display         : block;
  float           : right;
  position        : relative;
  background      : url('star-off.svg');
  background-size : contain;
}

.starRating:not(old) > label:before{
  content         : '';
  display         : block;
  width           : 1.5em;
  height          : 1.5em;
  background      : url('star-on.svg');
  background-size : contain;
  opacity         : 0;
  transition      : opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before{
  opacity : 1;
}

td.stars { width: 22%; }
td.visualis { width: 22%; }
table.tipo1 td {  width: 52%; 	height: 33px;}
table.tipo1 p{ font-size: 15px; font-weight: bold; }

////////////////////////////////////////////////////////////////////////////////

/* Alto Contraste*/
.contraste{
	background-color: black !important;
	color: white;
	a{
		color: yellow;
	}
	.search-bar{
		color: white !important;
	}
	#myCarousel{
		a{
			color: white !important;
		}
	}

	#search{
		.form-control{
			background-color: black !important;
			color:white;
		}
	}
	#subject-highlight{
		background-color: black !important;
	}
	
	.field{
		input{
			color: black !important;
		}
	}
	.actions{
		input{
			color: black !important;
		}
	}

	.panel-wrapper{
		background-color: black !important;
		border: 2px solid white;
		.btn{
			background-color: black !important;
			border: 5px solid white;
			border-style: outset;
		}
	}
}
.menu-bar-contrast{
	background-color: black !important;
	border-top: 2px solid white;
	border-bottom: 2px solid white;
	li{
		color: white !important;
		a{
			color:white !important;
		}
		a:hover{
			background-color: #1E1E1E !important;
		}
		a:active{
			background-color: #1E1E1E !important;
		}
		a:focus{
			background-color: #1E1E1E !important;
		}
		.caret{
			border-top:7px white solid;
		}
	}
	.divider{
		background-color: white;
	}
	.dropdown-menu{
		background-color: black;
	}
}