/*---------Record Styles---------*/
aside.common-sidebar {
	float: left !important;
}

div.common-container {
	position: relative;
}

div.backtotop {
	position: relative;
	text-align: right;
}

div.backtotop a  {
    background: url(../../common/images/arrow-up.png);
    border: 0px;
    width: 50px;
    background-size: 100% 100%;
    height: 40px;	
    position: absolute;
    right: 0%;	
    opacity: 0;
    top: 5px;
    transition: opacity .3s, top 0s; 
    cursor: pointer;
}

div.backtotop a.scrolling {
	opacity: 1;
    bottom: 0%;
    margin-left: -50px;	
    position: fixed;
    top: auto;
    right: inherit;
}

section.record-content {
	width: auto;
	max-width: 980px;
	padding-left: 20px;
	padding-right: 20px;
	height: auto;
	margin: 10px auto auto auto;
}

.col-1 {
	width: 100%;
}

.col-2 {
	width: 50%;
	float: left
}

.record-text {
	font-size: 14px;
}

div#record-row-1 p {
	line-height: 25px;
}

div#record-row-2 {
	background: #E9EC99;
	margin-top: 30px;	
    padding: 12px 0px;	
}

div#record-row-2 > div {
	margin-bottom: 8px;
}

div#record-row-2 > div:last-child {
	margin-bottom: 0px;
}

div#record-row-2 p.record-row-2-title {
    float: left;
    width: 80px;
    word-break: break-word;
    margin-left: 15px;
}

div#record-row-2 p.record-row-2-desc {
    float: left;
    width: auto;
    max-width: 80%;
}

div#record-row-3 {
	margin-top: 28px;
}

div#record-row-3 div.check-container {
	border: 3px solid #D1D2D4;
	box-sizing: border-box;
    padding: 25px 20px;	
}

div#record-row-3 div.check-container > div {
	margin-bottom: 10px;
}

div#record-row-3 div.check-container > div:last-child {
	margin-bottom: 0px;
}

div#record-row-3 span.check {
    background: url("../../medicine/record/images/check.png") no-repeat;
    width: 21px;
    height: 20px;
    display: block;
    background-size: 100% 100%;
    float: left;	
    margin-right: 10px;
}


div#record-row-3 span.check-text {
    display: block;
    float: left;
    word-break: break-word;
    color: #319F80;
    width: auto;
    max-width: 80%;
}

div#record-row-3 div.docs-container {
    padding: 40px 0px;
}

div#record-row-3 div.docs-container img {
    height: auto;
    width: 45%;
}

div#record-row-3 div.docs-container img:first-child {
	float: left;
	margin-left: 11px;
}

div#record-row-3 div.docs-container img:last-child {
	float: right;
	margin-right: 11px;
}

div#record-row-4 {
	margin-top: 50px;
	margin-bottom: 80px;
}

div#record-row-4 p.record-row-4-text {
	line-height: 25px;
}

div#record-row-4 p.record-row-4-text:first-child {
	margin-bottom: 20px;
}

div#record-row-4 p.record-row-4-text:last-child {
	margin-bottom: 0px;
}


aside.common-sidebar ul.special-menus {
	margin-top: 40px;
}

aside.common-sidebar ul.special-menus li {
	text-align: center;
	border: 0px;
    position: relative;
    cursor: pointer;	
	padding: 0px;
	background: none !important;
}

aside.common-sidebar ul.special-menus li a {
    display: block;
    background: url("../../medicine/images/med-house-icon.png") center no-repeat;
    background-position-y: 15px;
    padding: 65px 15px 15px 15px;
    border: 3px solid #32A080;
    position: relative;
    background-size: 50px;
}

aside.common-sidebar ul.special-menus li a:after {
    content: "";
    border: 9px solid transparent;
    border-right-color: #32A080;
    border-bottom-color: #32A080;
    position: absolute;
    bottom: 4%;
    right: 2%;
}

aside.common-sidebar ul.special-menus li a span.label {
    display: block;
    box-sizing: border-box;
    word-break: break-all;  
	color: #32A080;	    
    line-height: 1.1em;		   
}

/*---------Media Queries---------*/

@media all and (min-width: 769px) {
	.collapsible {
		overflow: hidden;
		display: block !important;
	}
}

@media all and (max-width: 920px) {
	.common-sidebar ul li a {
		font-size: 18px;
	}
}

@media all and (max-width: 852px) {
	.common-sidebar ul li a {
		font-size: 16px;
	}
}

@media all and (max-width: 768px) {
	
	.common-body-container {
		float: none !important;
		width: 100% !important; 
	}

	.hidden-small {
		display: none;
	}

	.col-1-small {
		width: 100% !important;
		float: none;
	}

	.col-2-small {
		width: 50% !important;
		float: left
	}

	div.common-banner h1	{
		text-align: center;
	}

	div.common-container {
		padding: 0px;
	}

	div.common-container h2 {
	    padding: 18px 25px;
	    position: relative;
	    cursor: pointer;
	    margin-bottom: 0px;
	}

	.collapsible-toggle {
		margin: 0px !important;
		padding: 18px 25px !important;
		cursor: pointer;
		position: relative;
	}

	.collapsible {
		padding: 20px 15px;
    	box-sizing: border-box !important;
	}	

	.collapsible-toggle:after {
	    content: "";
	    background: url(../../common/images/arrow-up-trans.png);
	    position: absolute;
	    right: 5%;
	    top: 42%;
	    width: 30px;
	    height: 15px;
	    transition: .2s;
	}

	.hide:after {
		transform: rotateZ(180deg);
	}

	aside.common-sidebar {
		display: none;
	}

	div#record-row-1 {
		padding: 18px;
		width: initial;
	}

	div#record-row-2 {
		margin-top: 0px;
	}	

	div#record-row-2 p.record-row-2-title,
	div#record-row-2 p.record-row-2-desc {
		float: none;
		margin-left: 15px;
		margin-bottom:5px;
		max-width: 90%;
	}

	div#record-row-2 > div {
		margin-bottom: 10px;
	}

	div#record-row-2 p.record-row-2-title {
		font-weight: bold;
	}

	div#record-row-3 div.check-container {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		border-color: #D1D2D4;
	}

	div#record-row-3 div.docs-container img {
		width: 40%;
	}

	div#record-row-3 div.docs-container img:first-child {
	    margin-left: 9%;
	}

	div#record-row-3 div.docs-container img:last-child {
	    margin-right: 9%;
	}		

	div#record-row-4 {
	    margin-top: 20px;
	    margin-bottom: 50px;
	    padding: 0px 25px;
	    width: initial;
	}
}

@media all and (max-width: 490px) {
	.collapsible-toggle {
		font-size: 25px !important;
	}
}

@media all and (max-width: 440px) {
	div#form ul.progress li:after {
		right: -21%;
	}

	div.success-msg {
		font-size: 0.8em;
	}

	.collapsible-toggle {
		font-size: 22px !important;
	}	
}

@media all and (max-width: 390px) {
	.common-banner h1  {
		font-size: 20px;
	}

	.collapsible-toggle {
		font-size: 19px !important;
	}	
}

@media all and (max-width: 360px) {
	.collapsible-toggle {
		font-size: 16px !important;
	}	
}

@media all and (max-width: 320px) {
	.collapsible-toggle {
		font-size: 18px !important;
	}	
}