.viewerpatri {
	padding:  0;	
	position:relative;
	/*top:0px;
	left:0px;
	right:  0px;
	bottom:  0px;*/
	display: grid;
	grid-template-columns: 200px 1fr 125px;
	grid-template-rows: 50px 50px 65px 150px 1fr;
	max-height:700px;
}

.viewerpatri div.optionimage {
    grid-column: 1 / span 3;
    grid-row: 3 / span 1;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}
.viewerpatri div.optionimage > div {
padding:0px 10px;

}
.viewerpatri div.optionimage label {
	margin-left:20px;
	margin-right:10px;	
}
.viewerpatri div.titre {
    text-align: center;
	grid-column:1 / span 3;
	grid-row : 1 / span 1;
}

.viewerpatri div.toolbar {    
	grid-column:1 / span 3;
	grid-row : 2 / span 1;	
     display: flex;
    align-items: center;
}

.viewerpatri input.pageNumber {
    font-size: 18px;
    padding: 0px;
    margin: 0px;
    border: none;
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
}
.viewerpatri span.pageNumberSpan {
    height: 32px;
    width: 60px;
    display: inline-block;
    border: 2px solid black;
    border-radius: 10px;
    overflow: hidden;
}

.viewerpatri div.summary {
		grid-column:1 / span 1;
	grid-row : 4 / span 1;
	padding:10px    
}

.viewerpatri div.summary p {
       word-wrap: break-word;
}

.viewerpatri div.sommaire {
	grid-column:1 / span 1;
	grid-row : 5 / span 1;
	max-height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}

.viewerpatri div.center {
	grid-column: 2 / span 2;
	grid-row : 4 / span 2;
	max-height: 100%;
	overflow:  hidden;
	/*position:relative;*/
}
 
.viewerpatri div.thumbimage {
	grid-column:3 / span 1;
	grid-row : 1 / span 3;
}

.viewerpatri .thumb {
	position:absolute;
	top:0;
	right:0;
	z-index:10;
	max-height:125px;
}


.viewerpatri .thumb > img {
    max-height: 125px;
}


.viewerpatri image {	
	position:  absolute;
	height:100%;
	width:100%;				
	top:0px;	
    background-size: contain;
    background-repeat: no-repeat;	
}	



.viewerpatri .sommaire ul {
    list-style:  none;
}

.viewerpatri .sommaire li {
    cursor:pointer;
}

.viewerpatri .onepagezomm {
    width: 100%;
    height: 100%;
}
.viewerpatri .onepage {
        width: 100%;
    height: 100%;
}


.viewerpatri img.pageone {
    max-width: 100%;
    max-height: 100%;
    margin:  auto;
}

.viewerpatri .toolbar .fa-stack {
	cursor:pointer;
}



.viewerpatri .optionimage input[type=range] {
  -webkit-appearance: none;
  width: 100px;
  margin: 4.5px 0;
}
/*
.viewerpatri .optionimage input[type=range]:focus {
  outline: none;
}
.viewerpatri .optionimage input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #ffffff, 0px 0px 0px #ffffff;
  background: rgba(48, 113, 169, 0.78);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
.viewerpatri .optionimage input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 0.6px #000031, 0px 0px 1px #00004b;
  border: 0px solid #00001e;
  height: 20px;
  width: 50px;
  border-radius: 21px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4.7px;
}
.viewerpatri .optionimage input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(106, 163, 213, 0.78);
}
.viewerpatri .optionimage input[type=range]::-moz-range-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #ffffff, 0px 0px 0px #ffffff;
  background: rgba(48, 113, 169, 0.78);
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
.viewerpatri .optionimage input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 0.6px #000031, 0px 0px 1px #00004b;
  border: 0px solid #00001e;
  height: 20px;
  width: 50px;
  border-radius: 21px;
  background: #ffffff;
  cursor: pointer;
}
.viewerpatri .optionimage input[type=range]::-ms-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.viewerpatri .optionimage input[type=range]::-ms-fill-lower {
  background: rgba(25, 60, 90, 0.78);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0px 0px 0px #ffffff, 0px 0px 0px #ffffff;
}
.viewerpatri .optionimage input[type=range]::-ms-fill-upper {
  background: rgba(48, 113, 169, 0.78);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 0px 0px 0px #ffffff, 0px 0px 0px #ffffff;
}
.viewerpatri .optionimage input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 0.6px #000031, 0px 0px 1px #00004b;
  border: 0px solid #00001e;
  height: 20px;
  width: 50px;
  border-radius: 21px;
  background: #ffffff;
  cursor: pointer;
  height: 11px;
}
.viewerpatri .optionimage input[type=range]:focus::-ms-fill-lower {
  background: rgba(48, 113, 169, 0.78);
}
.viewerpatri .optionimage input[type=range]:focus::-ms-fill-upper {
  background: rgba(106, 163, 213, 0.78);
}

.viewerpatri .optionimage > div {
    padding-left: 10px;
    padding-right: 10px;
}
i*/