/* EniBook */

/* Couleurs ENIB
orange : rgb(234,138,0);
noir   : rgb(62,61,64);
rose   : rgb(233,96,124);
bleu   : rgb(144,209,223);
beige  : rgb(247,244,241);
violet : rgb(159,159,202);
marron : rgb(193,181,162);
vert   : rgb(162,169,63);
-- */

/* Couleurs Bootstrap 
alert   success #DFF0D8
        info    #D9EDF7
        warning #FCF8C3
        danger  #F2DEDE

button  default #FFF
        primary #337AB7
        success #5C885C
        info    #5BC0DE
        warning #F0AD4E
        danger  #D953AF

*/

/* #### Mobile Phones Portrait #### 
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here 
}

/* #### Mobile Phones Landscape #### 
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here 
}

/* #### Mobile Phones Portrait or Landscape #### 
@media screen and (max-device-width: 640px){
  /* some CSS here
}

/* #### iPhone 4+ Portrait or Landscape #### 
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here 
}

/* #### Tablets Portrait or Landscape #### 
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here 
}

/* #### Desktops ####
@media screen and (min-width: 1024px){
  /* some CSS here
}
*/

@-webkit-keyframes blinker {  
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.css3-blink {
  -webkit-animation-name: blinker;  
  -webkit-animation-iteration-count: infinite;  
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-duration: 2s; 
  animation-name: blinker;  
  animation-iteration-count: infinite;  
  animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  animation-duration: 2s; 
}			


/* Divers */
a {
    font-weight     : normal;
    text-decoration : none;
}

ul {
    padding-left    : 1.5em;
}

.attention {
    border          : 1px solid #D953AF;
    border-radius   : 6px;
    background-color: #F2DEDE;
}

.glyphicons {
    color: white;
    font-size : 150%;
}

.ui-header-fullscreen {
    opacity : 1;
}

.ui-table-columntoggle-btn {
    float: left;
    margin: 0;
}

.ui-btn {
    color           : rgb(234,138,0);
    background-color: rgba(234,138,0,0.1);
}

kbd {
    color : white;
    background-color: gray;
    border-radius   : 4px;
    padding         : 2px;
}

textarea {
    outline: none;
}

textarea:hover {
    box-shadow      : 1px 1px 1px 1px rgb(234,138,0); /*#5BC0DE;*/
    -webkit-box-shadow: 1px 1px 1px 1px rgb(234,138,0); /*#5BC0DE;*/
}

textarea:focus {
    box-shadow      : 3px 3px 2px 2px rgb(234,138,0); /*#5BC0DE;*/
    -webkit-box-shadow: 3px 3px 2px 2px rgb(234,138,0); /*#5BC0DE;*/
}


input[type=text] {
    outline: none;
}

input[type=text]:hover {
    box-shadow      : 1px 1px 1px 1px rgb(234,138,0); /*#5BC0DE;*/
    -webkit-box-shadow: 1px 1px 1px 1px rgb(234,138,0); /*#5BC0DE;*/
}

input[type=text]:focus {
    box-shadow      : 3px 3px 2px 2px rgb(234,138,0); /*#5BC0DE;*/
    -webkit-box-shadow: 3px 3px 2px 2px rgb(234,138,0); /*#5BC0DE;*/
}

.CodeMirror {
    border        : 1px solid rgb(234,138,0);
    border-radius : 6px;
    height        : auto;
    viewportMargin: Infinity;
    margin-bottom : 5px;
}

.CodeMirror:focus {
    box-shadow      : 3px 3px 2px 2px rgb(234,138,0); 
    -webkit-box-shadow: 3px 3px 2px 2px rgb(234,138,0); 
}

.CodeMirror:hover {
    box-shadow      : 1px 1px 1px 1px rgb(234,138,0); 
    -webkit-box-shadow: 1px 1px 1px 1px rgb(234,138,0);     
}

.CodeMirror pre.CodeMirror-placeholder { color: rgba(234,138,0,0.5); }

.CodeMirror-gutters { background-color: rgba(234,138,0,0.1); border-right: 1px solid rgba(234,138,0,0.2); }

.CodeMirror-linenumber { color: rgba(234,138,0,0.5); }

.CodeMirror-activeline-background { background: rgba(234,138,0,0.1); }

.literal {
    background-color : #e0e0e0; 
}

.contents {
    background-color : WhiteSmoke;
    border-radius : 6px;
}

.mytable {
    border: 0px;
}

table caption {
    color           : black;
    font-weight     : bold;
    font-size       : 105%;
    opacity         : 1;
}

h1 {
    background-color: rgb(234,138,0);
    padding         : 10px;
    color           : white;
    font-weight     : normal;
}

h2 {
    padding         : 5px 5px 1px 5px;
    color           : rgb(234,138,0);
    cursor          : pointer;
    border-top      : 1px solid rgb(234,138,0);
    border-right    : 1px solid rgb(234,138,0);
    border-left     : 1px solid rgb(234,138,0);
    border-top-right-radius : 6px;
    border-top-left-radius  : 6px;
    font-weight     : normal;
}


/* EniBook general */
.enibook {
    color           : black; 
    background-color: white;
    font-size       : 16px;
    font-weight     : normal;
    display         : block;
    margin          : 0px;
    padding         : 0px;
}


/* Enibook Header, Footer, Body, Table of contents*/
.enibook-footer {
    color           : white;
    background-color: rgb(234,138,0);
    font-size       : 16px;
    font-weight     : normal;
    display         : inline-block;
    margin          : 0px;
    position        : fixed;
    left            : 0px;
    right           : 0px;
    vertical-align  : bottom;
    z-index         : 1000;
}

.enibook-header {
    color           : white;
    background-color: rgb(234,138,0);
    font-size       : 16px;
    font-weight     : normal;
    display         : block;
    margin          : 0px;
    /* position        : fixed; */
    left            : 0px;
    right           : 0px;
    vertical-align  : bottom;
    /* z-index         : 1000; */
}

.enibook-footer {
    bottom          : 0px;
    opacity         : 1.0;
}

.enibook-header {
    top             : 0px;
}

.enibook-header-title {
    display         : inline-block;
    padding-left    : 10px;
    text-align      : center;
}

.enibook-about,
.enibook-feedback,
.enibook-hint {
    background-color: white;
	border          : 1px solid rgb(234,138,0);
	border-radius   : 6px;
	padding         : 15px;
    margin          : 15px;
    /*display         : inline-block;*/
    /*max-width       : 400px;*/
    min-width       : 50%;
    overflow        : auto;
    resize          : both;
}


.enibook-main {
    color           : black; 
    background-color: white;
    font-size       : 16px;
    font-weight     : normal;
    display         : block;
    margin          : 0px;
    padding-left    : 20px;
    padding-right   : 20px;
    z-index         : -10;
    text-align: justify;
}

.enibook-help {
	background-color: white;
	font-size       : 75%;
    min-width       : 30%;
    max-width       : 50%; 
}

.enibook-help-content {
    overflow        : auto; 
    max-height      : 300px;
}

.enibook-tableofcontent {
    overflow        : auto; 
	background-color: white;
    max-height      : 300px;
}

.enibook-tableofcontent-global,
.enibook-tableofcontent-local,
.enibook-download,
.enibook-copyright {
	font-size       : 75%;
}

div.enibook-sidebar {
    margin: 0 0 0.5em 1em;
    border: 1px solid #ddb;
    border-radius: 6px;
    padding: 7px 7px 0 7px;
    background-color: rgba(234,138,0,0.1);
    width: 40%;
    float: right;
}
/* Save */
.save-feedback {
    border          : 1px solid rgb(234,138,0);
    border-radius   : 6px;
    padding         : 5px;
    margin          : 10px;
}

/* MenuProf */
.menuprof {
    text-align      : center;
}

.menuprof-about {
    display         : none;
}

/* Multicolumn */
.multicolumn {
    background-color:  white; /*rgba(51,136,204,0.02);*/
    border-top-left-radius  : 6px;
    border-top-right-radius : 6px;
    border-top      : 1px solid rgb(234,138,0); /*#3388CC;*/
    /*border-left     : 1px solid rgb(234,138,0);*/ /*#3388CC;*/
    /*border-right    : 1px solid rgb(234,138,0);*/ /*#3388CC;*/
}

.multicolumn-title {
    font-weight     : bold;
}

.multicolumn-nbcols {
	color           : rgb(234,138,0);
	font-size       : 70%;
	font-weight     : bold;
	display         : none;
}

.multicolumn-footer {
    background-color: white; /*rgba(51,136,204,0.02);*/
    border-bottom-left-radius  : 6px;
    border-bottom-right-radius : 6px;
    border-bottom   : 1px solid rgb(234,138,0); /*#3388CC;*/
    border-left     : 1px solid rgb(234,138,0); /*#3388CC;*/
    border-right    : 1px solid rgb(234,138,0); /*#3388CC;*/
    font-size       : 75%;
    text-align      : right;
}

.multicolumn-btns {
    display         : none;
}

/* Column */
.column {
    padding         : 0em 1em;
    display         : none;
}

/* Notabene */
.notabene {
    border          : 1px solid rgb(234,138,0);
    border-radius   : 6px;
    background-color: rgba(234,138,0,0.1);
    padding         : 5px;
    margin          : 10px 0px;
}

.notabene-title {
    font-weight     : bold;
    font-size       : 1.1em;
    margin          : 0px;
}

.notabene-subtitle {
    font-weight     : bold;
    margin-left     : 2px;
}

.notabene-content {
    margin-left     :   20px;
}

/* Btn */
.btn {
    padding         : 5px;
    border-radius   : 4px;
    cursor          : pointer;
}

.btn-default {
    background-color: white;
}

.btn-gray {
    background-color: gray;
}

.btn-lightgray {
    background-color: lightgray;
}

.btn-active {
    background-color: rgba(51,136,204,0.9); /* #3388CC; */
    
}

.btn-info {
    background-color: #5BC0DE; /* rgb(144,209,223); */
}

.btn-success {
	background-color: rgb(162,169,63); /*#5C885C;*/
}

.btn-warning {
    background-color: rgb(234,138,0);
}

.btn-warning-light {
    background-color: rgba(234,138,0,0.3);
}

.btn-danger {
    background-color: rgb(233,96,124);
}

/* Hint */

.hint {
    display         : none;
}

.hints {
	color           : rgb(234,138,0);
	font-size       : 70%;
	font-weight     : bold;
	display         : none;
    cursor          : pointer;
}

/* Block */

.block {
    display 		: block;
}

.block-title {
    color 			: rgb(234,138,0);
    border-bottom 	: 1px solid rgb(234,138,0);
    font-weight 	: bold;
    cursor 			: pointer;
}

.block-btn {
    font-size		: 80%;
    cursor 			: pointer;
}

.block-btn-items {
	color           : rgb(234,138,0);
	font-size       : 70%;
	font-weight     : bold;
	display         : none;
}

.block-content {
    display 		: none;
    border 			: 1px solid rgb(234,138,0);
    border-radius 	: 6px;
    margin-right	: 5px;
    padding-left  	: 5px;
    padding-right 	: 5px;
}

.block-title-header {
    color 			: white;
    background-color: rgb(234,138,0);
    border 			: 1px solid rgb(234,138,0);
    border-top-left-radius 	: 6px;
    border-top-right-radius : 6px;
    font-weight 	: bold;
    cursor 			: pointer;
    font-size 		: 120%;
    padding 		: 5px;
}


.block-btn-header {
    font-size		: 80%;
    cursor 			: pointer;
    float 			: right;
}

.block-content-header {
    display 		: none;
    border 			: 1px solid rgb(234,138,0);
    border-bottom-left-radius 	: 6px;
    border-bottom-right-radius 	: 6px;
    padding-left  	: 5px;
    padding-right 	: 5px;
    margin-bottom	: 5px;
}

/* Container */
.container {
	border-radius 	: 6px;
	border			: 1px solid rgb(234,138,0); 
	padding			: 5px; 
    margin-bottom	: 10px;
}

.container-items {
	color           : rgb(234,138,0); 
	font-size       : 70%;
}

.container-title {
	font-weight 	: bold;
	font-size 		: 100%;
}


/* Exercise */
.exercise-block {
    margin-bottom: 10px; 
    width:100%; 
    display: block;
}

.exercise {
	border-radius 	: 6px;
	border			: 1px solid rgb(234,138,0); 
	padding			: 5px; 
    margin-bottom	: 10px;
}

.exercise-items {
	color           : rgb(234,138,0); 
	font-size       : 70%;
}

.exercise-title {
	font-weight 	: bold;
	font-size 		: 100%;
}

.notes-banner {
    cursor          : pointer; 
    font-weight     : normal; 
    font-variant    : small-caps; 
    background-color: rgb(234,138,0); 
    color           : white;
}

/* MCQ */
.mcq {
	border-radius 	: 6px;
	/*border			: 1px solid rgb(234,138,0); */
	padding			: 5px; 
}

.mcq-items {
	color           : rgb(234,138,0);
	font-size       : 70%;
	font-weight     : bold;
}

.mcq-title {
	font-weight 	: bold;
	font-size 		: 100%;
}

.mcq-feedback {
    background-color: rgba(217,237,247,0.2);
    border-radius 	: 6px;
    color 			: blue;
    display         : none;
}

.mcq-feedback-tr {
	border-bottom	: 1px solid gray;
}

.q-mcq {
	border-radius	: 6px; 
    border-bottom   : 1px solid rgba(234,138,0,0.5);
	padding			: 5px; 
	margin-bottom	: 10px;
	font-weight     : normal;
}

.q-mcq-title {
	font-weight 	: bold;
	font-size 		: 100%;	
}

.q-mcq-label {
	font-weight     : normal;
}

.q-mcq-ol-li {
	list-style-type : decimal;
}

/* Input */

.input-block {
	padding         : 5px;
}

.input-help {
    display         : none;
}

/*
.input:hover {
    box-shadow      : 3px 3px 2px 2px rgb(234,138,0); 
    -webkit-box-shadow: 3px 3px 2px 2px rgb(234,138,0); 
}
*/

.input,
.input-code-run {
    border          : 1px solid rgb(234,138,0);
	border-radius   : 6px;
	padding         : 5px;
	font-size       : 105%;
}

.input-code-run {
    font-family: monospace;
}

.input-remove {
    position        : absolute; 
    color           : lightgray; 
    top             : 5px; 
    right           : 3px; 
    background-color: white;
    font-size       : 95%;
}

.input-remove-code-run {
    color           : rgb(234,138,0);/*lightgray; */
    background-color: white;
}

.input-hint {
    display         : none;
}

.inputlines-textarea {
	border-radius   : 6px;
    border          : 1px solid rgb(234,138,0); /*#5BC0DE;*/
	padding         : 5px;
    width           : 98.5%;
    max-width       : 98.5%;
    min-width       : 98.5%;
    font-family     : monospace;
    background-color: white;
    resize          : none;
}

/*
.inputlines-textarea:hover {
    box-shadow      : 3px 3px 2px 2px rgb(234,138,0); 
    -webkit-box-shadow: 3px 3px 2px 2px rgb(234,138,0); 
}
*/

/* FillBlank */
.fillblank {
	border          : 1px solid rgb(234,138,0);
	border-radius   : 6px;
	padding         : 5px;
    display         : none;
}

.fillblank-title {
	font-weight 	: bold;
	font-size       : 100%;
}

.fillblank-feedback {
    background-color: rgb(217,237,247);
    border-radius 	: 6px;
    color 			: blue;
    display         : none;
}

.fillblank-help-tr,
.fillblank-feedback-tr {
	border-bottom	: 1px solid lightgray;
}

.fillblank-help {
    background-color: white;
	border          : 1px solid #5BC0DE;
	border-radius   : 6px;
    box-shadow      : 0 0 2px 2px #5BC0DE;
    -webkit-box-shadow: 0 0 2px 2px #5BC0DE;
	padding         : 15px;
    margin          : 15px;
    display         : inline-block;
    min-width       : 150px;
    max-width       : 400px;
}

/* Feedback */
.feedback {
    display			: none;
}

.feedback-true {
    background-color: rgba(162,169,63,0.1); /*#DFF0D8;*/
    border-radius 	: 6px;
    color 			: green;
    display 		: block;
    padding         : 5px;
}

.feedback-false {
    background-color: rgba(233,96,124,0.1); /*#F2DEDE;*/
    border-radius 	: 6px;
    color 			: red;
    display 		: block;
    padding         : 5px;
}

.feedback-info {
    background-color: rgba(217,237,247,0.2);
    border-radius 	: 6px;
    color 			: blue;
    display 		: block;
    padding         : 5px;
}

.feedback-warning {
    background-color: rgba(234,138,0,0.1);
    border-radius 	: 6px;
    color 			: rgb(234,138,0);
    display 		: block;
    padding         : 5px;
}
.feedback-default {
    background-color: white;
    border-radius 	: 6px;
    color 			: black;
    display 		: block;
    padding         : 5px;
}

/* Sort */
.multisort {
    margin-top      : 5px;
    padding         : 5px;
    border          : 1px solid rgb(234,138,0); /*#3388CC;*/
    border-radius   : 6px;
}

.sort {
    padding         : 5px;
    border          : 1px solid lightgray; /*rgb(234,138,0);*/
    border-radius   : 6px; 
}

.sort-block {
    padding         : 10px;
}

.sort-header {
    display         : inline;
}

.sort-list {
    background-color: white;
    margin          : 10px;
    padding         : 10px;
}

.sort-list li {
    border          : 1px solid rgb(234,138,0);
    border-radius   : 6px;
    margin          : 10px;
    padding         : 5px;
    list-style-type : none;
}

.sort-placeholder {
    border          : 0;
    min-height      : 1em;
    background-color: #FCF8E3;
}

/* Edit */

.edit-language {
    font-weight     : bold;
}

.edit-lang {
    font-weight     : bold;
}

.edit-loadkeymap,
.edit-loadtheme {
    padding         : 0; 
    background-color: white;
}

.edit-file {
    font-weight     : normal;
}

.edit-help {
    display         : none;
}

.edit-comment-editor {
    min-width       : 5em;
}

.edit-comment-remark {
    min-width       : 10em;
}

.edit-comment-credit {
    min-width       : 10em;
}

.edit-language-editor {
    min-width       : 6em;
}

/* CodeRun */
.run-block {
    margin-bottom   : 5px;
}

.run-output {
    display         : block;
    background-color: #F1F1F1;
    padding         : 5px;
    border-radius   : 6px;
    margin-bottom   : 5px;
}

.run-input {
    display         : none;
    background-color: white;
}

.run-output pre {
    background-color: white;
    padding         : 0px 5px 0px 5px;
}

.run-textarea {
    display : none;
}

.run-line-error {
    background-color: red;
}

.run-error {
    display         : none;
    color           : red;
    min-height      : 21px;
    border          : 1px solid ;
    border-radius   : 6px;
    padding         : 5px; 
    margin          : 5px;         
}

.run-canvas {
    display         : none;
    /* width           : 100%; */
    padding-bottom  : 1px;
}

.run-div {
    display         : none;
    background-color: rgba(211,211,211,0.2);
    border-radius   : 6px;
    margin          : 5px;
    padding         : 5px;
    max-width       : 100%;
    height          : auto;
    overflow-x      : auto;
}

.run-pre {
    display         : none;
    background-color: rgba(211,211,211,0.2);
    border-radius   : 6px;
    margin          : 5px;
    padding         : 5px;
    max-width       : 100%;
}

.run-iframe,
.run-iframe-visionneuse {
    display         : none;
    background-color: white;
    padding         : 5px;
    border          : 1px solid #F1F1F1;
    min-height      : 500px;
}

.run-save-btn {
    display         : none;
}

/* Problem */

.problem {
    background-color: #FCF8E3; /* rgba(255,255,0,0.1); */
    border-radius   : 6px;
    padding         : 5px;
}

.problem-reference {
    font-weight     : bold;
    font-size       : 110%;
}

/* Question */

.question {
    background-color: rgba(234,138,0,0.05); 
    border-radius   : 6px;
    padding         : 5px;
    display         : block;
    margin-bottom   : 10px;
    /*border          : 1px solid rgb(234,138,0);*/
    font-weight     : normal;
}

.question-title {
    font-weight     : normal;
    font-variant    : small-caps;
}

.question-title:hover {
    background-color: #5BC0DE;
    color           : white;
}

.question-navbar {
    padding         : 2px;}

.question-footer {
    font-size       : 75%;
    text-align      : right;
}

/* Answer */

.answer {
	margin-top      : 5px;
	border-top      : 1px solid rgb(234,138,0);
    padding         : 5px;
    display         : inline-block;
    vertical-align  : top; 
    /*max-width       : 47%;*/
    /*background-color: #FCF8E3;;*/
}

/* Solution */

.solution {
    margin-left     : 10px;
    margin-top      : 5px;
	border-top      : 1px solid rgb(234,138,0);
	border-left     : 1px solid rgb(234,138,0);
    padding         : 5px;
    display         : inline-block;
    vertical-align  : top;
    /*max-width       : 47%;*/
}

.method {
    border-bottom   : 10px solid white;
}

.verification {
    border-bottom   : 10px solid white;
}

.ul-questions,
.ul-solutions {
    display       : inline-block;
    width         : 48%;
    vertical-align: top;
    padding-right : 10px;
}

.ul-solutions {
    background-color: rgba(162,169,63,0.1)
}
/* Graph */
.graph {
    border          : 1px solid gray;
    border-radius   : 6px;
}

.graph-graphname {
    font-weight     : bold;
}

.graph-filename {
    font-weight     : normal;
}

.graph-table {
    margin          : 15px;
    display         : inline-block;
    vertical-align  : top;
}

.graph-table th {
    border-bottom   : 1px solid #d6d6d6;
    background      : #e9e9e9;
}

.graph-table tr:nth-child(even) {
    background      : #e9e9e9;
}


/* Diagram */
.diagram {
    border          : 1px solid gray;
    border-radius   : 6px;
}

.diagram-file {
    font-weight     : normal;
}

.diagram-table {
    margin          : 15px;
    display         : inline-block;
    vertical-align  : top;
}

.diagram-table th {
    border-bottom   : 1px solid #d6d6d6;
    background      : #e9e9e9;
}

.diagram-table tr:nth-child(even) {
    background      : #e9e9e9;
}

/* Scope */
.scope {
    padding         : 5px;
    border          : 1px solid rgb(234,138,0);
    border-radius   : 6px;
}

.scope-pt-btn {
    margin-left     : 2px; 
    margin-right    : 2px; 
    background-color: white;
    border-radius   : 4px;
    font-family     : verdana,arial,helvetica,sans-serif; 
    border          : 1px solid lightgray; 
    font-size       : 10pt;
    padding         : 2px 5px 2px 5px;
}
/* */
.titlepage {
    padding         : 20%;
    text-align      : right;
}

.sql-div-table {
    display       : inline-block;
    overflow-x    : auto;
    max-width     : 100%;
    height        : auto;
    vertical-align: top;
}

.sql-table {
    display        : inline-table;
    margin         : 5px;
}

.sql-table th {
    border: 1px solid;
}

.sql-table td {
    border: 1px solid;
}

.sql-table tr:hover {
    background-color: lightgray;
}

.query-table {
    display        : inline-table;
    margin         : 5px;
}

.query-table thead th {
    border: 1px solid;
}

.query-table tbody td {
    border: 1px solid;
}

.query-table tr:hover {
    background-color: lightgray;
}

.graph-diagram canvas {
    resize: both;
}

.graph-modal {
    display: none; /* Hidden by default */
}

.commentreplay {
    border: 1px solid rgb(234,138,0); 
    padding: 5px; 
    margin: 5px;
    background-color: rgba(234,138,0,0.1); 
    min-height: 20px; 
}

.commentreplay-legend {
    font-weight     : normal; 
    font-variant    : small-caps; 
    background-color:rgb(234,138,0); 
    color: white;
}

@media all and (max-device-width: 480px)
{
    .titlepage>h1 { font-size: 100%; }
    .titlepage>h2 { font-size: 75%; }
    .titlepage>h3 { font-size: 50%; }
}

.titlepage>h1 { font-size: 200%; }
.titlepage>h2 { font-size: 150%;  }
.titlepage>h3 { font-size: 120%;  }


.next, .previous {
    position        : fixed; 
    top             : 0%; 
    bottom          : 0%; 
    border          : 0px; 
    opacity         : 0.1; 
    width           : 20px;
    z-index         : 100;
}

.next {
    right           : 0px;
}

.previous {
    left            : 0px;
}

.next:hover, .previous:hover {
    background-color: rgb(234,138,0);
    color           : white;
    text-decoration : none;
    outline         : 0;
    opacity         : 0.3; 
}

.next-icon, .previous-icon {
    position        : absolute; 
    top             : 50%;
    left            : -5px;
}