/* main container styles */
div.drum-wrapper {
	position: relative;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	width:250px;
}
div.drum-wrapper .inner {
	position: relative;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}
div.drum-wrapper div.container {
	position: absolute;
	width: 100%;
	top: 48px;
	left: 0px;
	-webkit-perspective: 1100px;
	-moz-perspective: 1100px;
	-o-perspective: 1100px;
	perspective: 1100px;
	-webkit-overflow-scrolling: touch;
	margin-top:35px;     /* This is to add space between top of sphere and box */
}
div.drum-wrapper {
	height: 0px;
	width:0px;
	border:1px solid rgba(0, 0, 0, 0.4);
	
}

div.drum-wrapper .inner {
	height:215px;             /*----------for height of  scroller----------*/
	width:350px;
	background-color:#ffffff;
	/*margin: 100px auto;*/
	border-radius:8px;
}
.outside div.drum-wrapper {
	height: 240px;
}
.outside div.drum-wrapper .inner {
	top: 12px;
}
.outside div.drum-wrapper .container {
	top: 46px;
}
/* dail styles for mouse controls */
div.drum-wrapper .dial {
	position: absolute;
	width: 100%;
	left: 0px;
	height: 48px;
	background-color: rgba(255, 255, 255, 0.7);
	display: none;
}
.outside div.drum-wrapper .dial {
	height: 58px;
}
div.drum-wrapper .dial div {
	width: 20px;
	height: 10px;
	margin: 0 auto;
}
div.drum-wrapper .dial svg {
	position: absolute;
}
div.drum-wrapper .up {
	top: 0px;
}
div.drum-wrapper .up svg {
	top: 2px
}
div.drum-wrapper .down {
	bottom: 0px;
}
div.drum-wrapper .down svg {
	bottom: 2px;
}
/* actual drum styles */
div.drum {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-overflow-scrolling: touch;
	
	transition: all 0.3s ease-out 0.0s;
}
/*    for the text styling     */
div.drum figure {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	line-height: 20px;
	/*color:rgb(0, 149, 59);*/
	color:black;
	margin: 0px;
	padding: 0px 3px;
	/*text-overflow: ellipsis;*/
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	text-align: center;
	/*border-bottom: 1px solid rgba(0, 0, 0, 1);
	border-top: 1px solid rgba(0, 0, 0, 1);*/
	font-size:25px;
	
}
div.drum-wrapper div.container, div.drum-wrapper figure {
	height: 50px;
	line-height: 60px;
}
.arrow-right {
	width: 0;
	height: 0;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid white;
}

                                /*---------------       IPAD AND IPHONE CSS CHANGES        -----------------*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
#drum_ctl00_cphMainContent_ddlDoctorList, #drum_ctl00_cphMainContent_ddlDepartmentList {
	position:fixed;

	z-index:2000;
}
 .divDrum_dept_Outer1 {
	 visibility: hidden;
	 /* height:110%;
	width:107%;*/
	width:1224px;
	height:100%;
	 position:absolute;
	 top:-10px;
	 left:-33px;
	 z-index:1000;
	 background-color:rgba(0, 0, 0, 0.4);
}
}
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
#drum_ctl00_cphMainContent_ddlDoctorList, #drum_ctl00_cphMainContent_ddlDepartmentList {
	position:fixed;
	
	z-index:2000;
}
.divDrum_dept_Outer1 {
	 visibility: hidden;
	padding:0px;
	margin:0px;
	 /*height:107%;
	 width:100%;*/
	 width:768px;
	 height:100%;
	 position:absolute;
	 top:0px;
	 left:0px;
	 z-index:1000;
	 background-color:rgba(0, 0, 0, 0.4);
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
	
#drum_ctl00_cphMainContent_ddlDoctorList, #drum_ctl00_cphMainContent_ddlDepartmentList {
	position:fixed;
	left:30%;
	top:20%;
	z-index:2000;
}
 .divDrum_dept_Outer1 {
	 visibility: hidden;
	 height:105%;
	width:105%;
	 position:absolute;
	 top:-10px;
	 left:-10px;
	 z-index:1000;
	 background-color:rgba(0, 0, 0, 0.4);
}

div.drum-wrapper .inner {
	height:135px;             /*----------for height of  scroller----------*/
	width:230px;
	border-radius:4px;
}
div.drum-wrapper div.container {
	margin-top:8px;     /* This is to add space between top of sphere and box */
	
}
div.drum-wrapper div.container, div.drum-wrapper figure {
	height: 25px;
	line-height: 25px;
}
div.drum figure {
	line-height: 20px;	
	font-size:16px;
}
	}
	
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
	
	#drum_ctl00_cphMainContent_ddlDoctorList, #drum_ctl00_cphMainContent_ddlDepartmentList {
	position:fixed;
	left:30%;
	top:20%;
	z-index:2000;
}
 .divDrum_dept_Outer1 {
	 visibility: hidden;
	 height:105%;
	width:105%;
	 position:absolute;
	 top:-10px;
	 left:-10px;
	 z-index:1000;
	 background-color:rgba(0, 0, 0, 0.4);
}

div.drum-wrapper .inner {
	height:135px;             /*----------for height of  scroller----------*/
	width:230px;
	border-radius:4px;
}
div.drum-wrapper div.container {
	margin-top:8px;     /* This is to add space between top of sphere and box */
}
div.drum-wrapper div.container, div.drum-wrapper figure {
	height: 25px;
	line-height: 25px;
}
div.drum figure {
	line-height: 20px;	
	font-size:16px;
}
	
	}