@charset "utf-8";
/* CSS Document */

.imgsec {
  position: relative;
  text-align: center;
  color: brown;
}

img {
    pointer-events: none;
}

.centeredsec{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Lucida Console", Courier, monospace;
  font-size: 30px;
  opacity: 0.6;
	}
.centeredsec1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Lucida Console", Courier, monospace;
  font-size: 15px;
  opacity: 0.6;
	}
.centeredsec2{
  position: absolute;
  top: 25%;
  left: 20%;
  transform: translate(-50%, -50%);
  font-family: "Lucida Console", Courier, monospace;
  font-size: 15px;
  opacity: 0.6;
	}
.centeredsec3{
  position: absolute;
  top: 25%;
  left: 80%;
  transform: translate(-50%, -50%);
  font-family: "Lucida Console", Courier, monospace;
  font-size: 15px;
  opacity: 0.6;
	}
.centeredsec4{
  position: absolute;
  bottom: 20%;
  left: 80%;
  transform: translate(-50%, -50%);
  font-family: "Lucida Console", Courier, monospace;
  font-size: 15px;
  opacity: 0.6;
	}
.centeredsec5{
  position: absolute;
  bottom: 20%;
  left: 20%;
  transform: translate(-50%, -50%);
  font-family: "Lucida Console", Courier, monospace;
  font-size: 15px;
  opacity: 0.6;
	}
.activechathearder{
	background: #04922F;
}

#overlaymodeoffline {
	z-index: 15; 
	position: absolute; 
	width: 100%; 
	height: 100%; 
	background-color: rgba(0,0,0,0.5);
}
#offlineballchat{
width: 120px; 
height: 120px; 
border-radius: 50%; 
background:rgba(0,0,0,1.00); 
text-align: center; 
background: radial-gradient(circle at 100px 100px, #A50002, #000);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
	
}
#childball {
	position: absolute; 
	width: 120px; 
	height: 20px; 
	background: #000000; 
	color: #EAD81D;
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%);
}

.coccoc-alo-ph-circle {
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    position: absolute;
    background-color: transparent;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid rgba(30, 30, 30, 0.4);
    opacity: .1;
    -webkit-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    -moz-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    -ms-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    -o-animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    animation: coccoc-alo-circle-anim 1.2s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.coccoc-alo-phone {
    background-color: transparent;
    width: 200px;
    height: 200px;
    cursor: pointer;
    z-index: 200000 !important;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition: visibility .5s;
    -moz-transition: visibility .5s;
    -o-transition: visibility .5s;
    transition: visibility .5s;
    right: 150px;
    top: 30px;
}

.coccoc-alo-phone.coccoc-alo-green .coccoc-alo-ph-circle-fill {
    background-color: rgba(0, 175, 242, 0.5);
    opacity: .75 !important;
}

.coccoc-alo-ph-circle-fill {
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
    position: absolute;
    background-color: #000;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .1;
    -webkit-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -moz-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -ms-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -o-animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: coccoc-alo-circle-fill-anim 2.3s infinite ease-in-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.coccoc-alo-ph-img-circle {
    width: 60px;
    height: 60px;
    top: 70px;
    left: 70px;
    position: absolute;
    background: rgba(30, 30, 30, 0.1) url(https://drive.google.com/uc?id=1V3N2b79QjDWetC_ss9wI3c-xpWDymn9R) no-repeat center center;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .7;
    -webkit-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    -moz-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    -ms-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    -o-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
}

.coccoc-alo-phone.coccoc-alo-green .coccoc-alo-ph-img-circle {
    background-color:#BC0306;
}

.coccoc-alo-phone.coccoc-alo-green .coccoc-alo-ph-circle {
    border-color: #BC0306;
    opacity: .5;
}

.coccoc-alo-phone.coccoc-alo-green.coccoc-alo-hover .coccoc-alo-ph-circle,
.coccoc-alo-phone.coccoc-alo-green:hover .coccoc-alo-ph-circle {
    border-color: #BC0306;
    opacity: .5;
}

.coccoc-alo-phone.coccoc-alo-green.coccoc-alo-hover .coccoc-alo-ph-circle-fill,
.coccoc-alo-phone.coccoc-alo-green:hover .coccoc-alo-ph-circle-fill {
    background-color: rgba(117, 235, 80, 0.5);
    opacity: .75 !important;
}

.coccoc-alo-phone.coccoc-alo-green.coccoc-alo-hover .coccoc-alo-ph-img-circle,
.coccoc-alo-phone.coccoc-alo-green:hover .coccoc-alo-ph-img-circle {
    background-color: #BC0306;
}

@-moz-keyframes coccoc-alo-circle-anim {
    0% {
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }
    30% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@-webkit-keyframes coccoc-alo-circle-anim {
    0% {
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }
    30% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@-o-keyframes coccoc-alo-circle-anim {
    0% {
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }
    30% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@keyframes coccoc-alo-circle-anim {
    0% {
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }
    30% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@-moz-keyframes coccoc-alo-circle-fill-anim {
    0% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@-webkit-keyframes coccoc-alo-circle-fill-anim {
    0% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@-o-keyframes coccoc-alo-circle-fill-anim {
    0% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@keyframes coccoc-alo-circle-fill-anim {
    0% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }
    100% {
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }
}

@-moz-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@-webkit-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@-o-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

.callingvoice {
	height: 80px;
	width: 80px;
	border-radius: 50%;
	background: radial-gradient(circle at 100px 100px, #00A638, #000);
}

.callingvideo {
	height: 80px;
	width: 80px;
	border-radius: 50%;
	background: radial-gradient(circle at 100px 100px, #00A638, #000);
}

.diconnectvoice {
	height: 80px;
	width: 80px;
	border-radius: 50%;
	background: radial-gradient(circle at 100px 100px, #FA0004, #000);
}
.staticvideoscreen {
	max-height: 550px;
	min-height: 550px;
}

#icons {
  bottom: 20px;
  right: 0;
  left: 0;
  text-align:center;
  width: 250px;
  margin: auto;
  position: absolute;
}
#vibrator {
  top: 0;
  right: 0;
  width: 50px;
  position: absolute;
}

#callicons {
  text-align:center;
  width: 250px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -110px;
}
#recievecallicons {
  text-align:center;
  width: 250px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -110px;
}



#rooms-list {
  text-align:center;
  width: 250px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -110px;
	
	}


#start-conferencing:hover {
  background: #3db30e;
}

circle {
  fill: #666;
  fill-opacity: 0.6;
}

svg.on circle {
  fill-opacity: 0;
}
svg:hover {
  box-shadow: 4px 4px 48px #666;
}

#icons.active svg {
  transform: translateX(0);
}

#mute-mic {
  transition: 40ms;
}

#mute-mic:hover,
#mute-mic.on {
  background: #4CAF50;
}

#mute-mic:hover circle {
  fill: #4CAF50;
}

#unmute-mic {
  transition: 40ms;
   display:none;
}

#unmute-mic:hover,
#unmute-mic.on {
  background: #dd2c00;
}

#unmute-mic:hover circle {
  fill: #dd2c00;
}


#mute-audio {
  transition: 40ms;
}

#mute-audio:hover,
#mute-audio.on {
  background: #407cf7;
}

#mute-audio:hover circle {
  fill: #407cf7;
}

#mute-video {
  transition: 120ms;
  
}

#mute-video:hover,
#mute-video.on {
  background: #407cf7;
}

#mute-video:hover circle {
  fill: #407cf7;
}

#unmute-video {
  transition: 120ms;
   display:none;
}

#unmute-video:hover,
#unmute-video.on {
  background: #dd2c00;
}

#unmute-video:hover circle {
  fill: #dd2c00;
}

#switch-video {
  transition: 200ms;
}

#switch-video:hover {
  background: #407cf7;
}

#switch-video:hover circle {
  fill: #407cf7;
}

#fullscreen {
  transition: 280ms;
}

#fullscreen:hover,
#fullscreen.on {
  background: #407cf7;
}

#fullscreen:hover circle {
  fill: #407cf7;
}

#exitfullscreen{
  transition: 280ms;
  display:none;
}

#exitfullscreen:hover,
#exitfullscreen.on {
  background: #407cf7;
}

#exitfullscreen:hover circle {
  fill: #407cf7;
}
.speedactive0 {
	background: #FFF;
}

.speedactive1 {
	background: #FF0;
}

.speedactive2 {
	background: #090;
}

.speedactive3 {
	background: #C00;
}

#hangup {
  transition: 360ms;
}

#hangup:hover {
  background: #dd2c00;
}
#fullscreen:hover {
  background: #dd2c00;
}
#fullscreen:hover {
  background: #dd2c00;
}
#showmsgtext:hover {
  background: #dd2c00;
}
#hangup:hover circle {
  fill: #dd2c00;
}

.icon-container {
 text-align: center;
  bottom: 5px;
  height:auto;
  width: 50px;
  right: 10px;
  position: absolute;
  z-index:3
}

.icon {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 45px;
  height: 45px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 30px;
  overflow: hidden;
}
.icon::before, .icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.25s ease;
  border-radius: 30px;
}
.icon i {
  position: relative;
  color: #FFFFFF;
  font-size: 20px;
  margin-top: 13px;
  transition: all 0.25s ease;
}
.icon-fill::before {
  transition-duration: 0.5s;
  box-shadow: inset 0 0 0 1px #16A085;
}
.icon-fill:hover::before {
  box-shadow: inset 0 0 0 60px #16A085;
}

.icon-enter::after {
  box-shadow: inset 0 0 0 1px #EB9532;
}
.icon-enter::before {
  border-radius: 0;
  margin-left: -100%;
  box-shadow: inset 0 0 0 60px #EB9532;
}
.icon-enter:hover::before {
  margin-left: 0;
}

.icon-expand::after {
  box-shadow: inset 0 0 0 1px #C82647;
}
.icon-expand::before {
  background: #C82647;
  box-shadow: inset 0 0 0 60px #2d2c3e;
}
.icon-expand:hover::before {
  box-shadow: inset 0 0 0 1px #2d2c3e;
}

.icon-collapse::before {
  border-radius: 0;
}
.icon-collapse:hover::before {
  box-shadow: inset 0 30px 0 0 #8CC63F, inset 0 -30px 0 0 #8CC63F;
}
.icon-collapse::after {
  box-shadow: inset 0 0 0 1px #8CC63F;
}

.icon-rotate {
  box-shadow: inset 0 0 0 1px #7E3661;
}
.icon-rotate::after, .icon-rotate::before {
  border: 0px solid transparent;
}
.icon-rotate:hover::before {
  transition: border-top-width 0.3s ease, border-top-color 0.3s ease;
  border-width: 45px;
  border-top-color: #7E3661;
}
.icon-rotate:hover::after {
  transition: border-left-width 0.3s ease, border-left-color 0.3s ease;
  border-width: 45px;
  border-left-color: #7E3661;
}
.icon-rotate:hover {
  transition: background 0.001s ease 0.3s;
  background: #7E3661;
}
.icon-rotate i {
  z-index: 1;
}
#local-video {
  display:block;
  height:100%;
  max-height:100%;
  max-width: 100%;
  object-fit: cover;  /* no letterboxing */
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
  transition: opacity 1s;
  width: 100%;
		}
#modal-body {
  background-color: #333;
  color: #fff;
  font-family: 'Roboto', 'Open Sans', 'Lucida Grande', sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#videos {
  font-size: 0; /* to fix whitespace/scrollbars problem */
  height: 100%;
  pointer-events: none;
  position: absolute;
  transition: all 1s;
  width: 100%;
}

#mini-video {
  border: 1px solid gray;
  top: 20px;
  right: 20px;
  /* video div is flipped horizontally when active*/
  max-height: 22%;
  max-width: 22%;
  opacity: 0;
  position: absolute;
  transition: opacity 1s;
}
.mini-security {
  top: 20px;
  right: 20px;
  /* video div is flipped horizontally when active*/
  max-height: 15%;
  max-width: 15%;
  position: absolute;
  transition: opacity 1s;
  opacity: 0.4;
  z-index: 4;
  border-radius:3px;
}

#modelmini-video {
  border: 1px solid gray;
  bottom: 20px;
  right: 20px;
  /* video div is flipped horizontally when active*/
  max-height: 22%;
  max-width: 22%;
  opacity: 0;
  position: absolute;
  transition: opacity 1s;
}

#chatbox {
  bottom: 20px;
  left: 20px;
  /* video div is flipped horizontally when active*/
  max-height: 100%;
  max-width: 250px;
  opacity: 0;
  position: absolute;
  transition: opacity 1s;
  opacity: 1;
  z-index: 2;
  background:transparent;
}

.unitstimer{
  top: 10px;
  left: 10px;
  /* video div is flipped horizontally when active*/
  height: 10%;
  width: 300px;
  opacity: 1;
  z-index: 2;
  position: absolute;
  transition: opacity 1s;
  text-align: center;
  /*font-size: 2vw;*/
  margin-top: 0px;
  color:#0C0;
	}

#mini-video.active {
  opacity: 1;
  z-index: 2;
}

#modelmini-video.active {
  opacity: 1;
  z-index: 2;
}


#remote-video {
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;  /* no letterboxing */
  opacity: 0;
  position: absolute;
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transition: opacity 1s;
  width: 100%;
}

#remote-video.active {
  opacity: 1;
  z-index: 1;
}

.callhidden {
  display: none;
}
#attendcall{
	text-align:center;
	width:60px;
	height:60px;
	background:#090;
	color:#FFF;
	font-size:30px;
	padding:15px;
	line-height:1;
	border-radius:50%;
	animation: pulse 1s cubic-bezier(0,0,0,0) 0.3s infinite;
	margin-top:50px;
	}
/*#app i {
	text-shadow: 0 2px 10px #00FF33;
	animation: changeSize 1s cubic-bezier(0,0,0,0) 0s infinite;
	
	}
@keyframes pulse {
	0%{ box-shadow:0 0 0 0 #0F0;}
	25%{ box-shadow:0 0 0 8px #0F6;}
	50%{ box-shadow:0 0 0 14px #0F9;}
	75%{ box-shadow:0 0 0 22px #9F9;}
	100%{ box-shadow:0 0 0 30px #FFF;}
	}
@keyframes changeSize 
   {
	0%{ transform: scale(1);}
	25%{ transform: scale(1.2);}
	50%{ transform: scale(0.8);}
	75%{ transform: scale(1.1);}
	100%{ transform: scale(1);}
	
	}*/

.activevoicecall{
	background:#BB0409;
	}
img {
    pointer-events: none;
}
#video-message{
  top: 20px;
  left: 20px;
  /* video div is flipped horizontally when active*/
  height: 80%;
  width: 25%;
  opacity: 1;
  z-index: 4;
  position: absolute;
  transition: opacity 1s;
	}
#useractivestatus{
  color:#FFF;
  top: 20px;
  left: 20px;
  /* video div is flipped horizontally when active*/
  width: 25%;
  opacity: 1;
  z-index: 2;
  position: absolute;
  transition: opacity 1s;
	}
#video-message-sender{
  bottom: 20px;
  left: 20px;
  /* video div is flipped horizontally when active*/
  height: 10%;
  width: 25%;
  opacity: 1;
  z-index: 2;
  position: absolute;
  transition: opacity 1s;
	}
.videotext{
	background: transparent;
	background-color:transparent;
}
.videocalltext{
	color:#000000;
	}
#video-ip-security{
  /* video div is flipped horizontally when active*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Lucida Console", Courier, monospace;
  font-size: 30px;
  opacity: 0.6;
	}
/*#cameraswife {
  border: 1px solid gray;
  top: 10px;
  left: 10px;
  opacity: 1;
  z-index: 2;
  position: absolute;
  transition: opacity 1s;
}*/
#myuploadaudio{
	width:100%;
	}
.aurecbutton{
	background:#900;
	}
.hreflink2 {cursor: pointer;}

.disbalemouseclick{
	pointer-events:none;
	}
.slider-container {
  bottom: 60px;
  height:200px;
  width: 15px;
  right: 25px;
  position: absolute;
  z-index:3
}
.slider-container .slider2 {
    -webkit-appearance: none;
    position:absolute;
	z-index:3;
	background: #d3d3d3;
	left:50%;
	top:50%;
	margin:0;
	width:200px;
	height:15px;
	outline:none;
	transform:rotate(-90deg) translate(-50%,-50%);
	transform-origin: 0 0;
	background-color:rgba(0,0,0,.1);
	border-radius:10px;
}

.slider-container .slider2:hover {
  opacity: 1;
}

.slider-container .slider2::-webkit-slider-thumb {
 -webkit-appearance:none;
	width:30px;
	height:30px;
	border:8px solid #3e3e3e;
	border-radius:15px;
	background-color:#ffe53b;
	box-shadow: 0 0 5px rgba(0,0,0,.5);
	cursor:pointer;
	transition: .3s ease-in-out;
	}
.slider-container .slider2::-webkit-slider-thumb:over{
	border-color:#eeeeee
	}
.slider-container .slider2::-webkit-slider-thumb:active{
	box-shadow: 0 0 0 15px rgba(255,255,255,.1)
	}

.slider-container .fill{
	position:absolute;
	left:0;
	right:0;
	}

.slider-container .bar{
	border:100%;
	background-color:rgba(0,0,0,.2);
	border-radius:10px;
	
	}
.slider-container .fill{
	z-index:2;
	height:0%;
	bottom:0px;
	overflow:hidden;
	border-radius:10px;
	}
.slider-container .fill::before{
	content:'';
	position:absolute;
	left:0;
	right:0;
	height:200px;
	bottom:0px;
	background: url("IMAGE_URL") left top, linear-gradient(0deg, #ffe53b 0%, #ff2525 100%);
	}

.slider-containermodel {
  bottom: 60px;
  height:200px;
  width: 15px;
  left: 25px;
  position: absolute;
  z-index:3
}
.slider-containermodel .slider2 {
    -webkit-appearance: none;
    position:absolute;
	z-index:3;
	background: #d3d3d3;
	left:50%;
	top:50%;
	margin:0;
	width:200px;
	height:15px;
	outline:none;
	transform:rotate(-90deg) translate(-50%,-50%);
	transform-origin: 0 0;
	background-color:rgba(0,0,0,.1);
	border-radius:10px;
}

.slider-containermodel .slider2:hover {
  opacity: 1;
}

.slider-containermodel .slider2::-webkit-slider-thumb {
 -webkit-appearance:none;
	width:30px;
	height:30px;
	border:8px solid #3e3e3e;
	border-radius:15px;
	background-color:#ffe53b;
	box-shadow: 0 0 5px rgba(0,0,0,.5);
	cursor:pointer;
	transition: .3s ease-in-out;
	}
.slider-containermodel .slider2::-webkit-slider-thumb:over{
	border-color:#eeeeee
	}
.slider-containermodel .slider2::-webkit-slider-thumb:active{
	box-shadow: 0 0 0 15px rgba(255,255,255,.1)
	}
.slider-containermodel .fill{
	position:absolute;
	left:0;
	right:0;
	}

.slider-containermodel .bar{
	border:100%;
	background-color:rgba(0,0,0,.2);
	border-radius:10px;
	
	}
.slider-containermodel .fill{
	z-index:2;
	height:0%;
	bottom:0px;
	overflow:hidden;
	border-radius:10px;
	}
.slider-containermodel .fill::before{
	content:'';
	position:absolute;
	left:0;
	right:0;
	height:200px;
	bottom:0px;
	background: url("IMAGE_URL") left top, linear-gradient(0deg, #ffe53b 0%, #ff2525 100%);
	}