﻿/*General*/
* {
	outline: 0px none;
	font-family: Tahoma;
	font-size: 9pt;
	text-decoration: none;
	padding: 0;
	margin: 0;
	vertical-align: baseline;
}
html, body {
	height: 100%;
}
body {
	background-image: url('Images/Backgrand.png');
	/*background-repeat: repeat-x;*/
	background-position: center top;
	/*background-color: #EDEDED;*/
	overflow-y: scroll;
}
p{
	line-height: 2em;
	padding-top: 10px;
    font-size: 9pt;
    font-weight: bold;
}
img {
	border: 0 none;
}
a, a:visited {
	color: #126499;
	text-decoration: none;
	font-weight: normal;
}
a:hover {
	color: #f00;
}
input[type="text"], input[type="password"], input[type="file"] {
	border: 1px solid #c9c9c9;
	width: 200px;
	padding: 6px 4px;
	text-align:right;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
	background-color: #E9FFE9;
	border-color: #52C552;
}
select {
	border: 1px solid #c9c9c9;
	width: 220px;
	margin-top: 5px;
	padding: 5px 0;
}
textarea {
	border: 1px solid #C9C9C9;
	padding: 5px 0;
	min-width: 200px;
}
fieldset {
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	padding: 20px 10px 10px 10px;
	margin: 10px 0;
}
fieldset legend{
	border: 1px solid #c9c9c9;
	border-radius: 4px;
	padding: 10px;
	display: block;
}
table {
	border: solid 1px #CDCDCD;
	border-collapse: collapse;
}
table td {
	padding: 5px;
	border: solid 1px #CDCDCD;
	vertical-align: top;
}
table th {
	padding: 6px 5px;
	text-align: right;
	background-color: #057CD8;
	border: solid 1px #deffff;
	color: #42454A;
	font-weight: normal;
}

table tr.deleted td {
	text-decoration: line-through;
}

@font-face {
  font-family: 'Koodak';
  src: url('Fonts/Koodak/BKoodakBold.eot?#') format('eot'),  /* IE6–8 */
	   url('Fonts/Koodak/BKoodakBold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	   url('Fonts/Koodak/BKoodakBold.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
  font-family: 'Titr';
  src: url('Fonts/Titr/BTitrBold.eot?#') format('eot'),  /* IE6–8 */
	   url('Fonts/Titr/BTitrBold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	   url('Fonts/Titr/BTitrBold.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
  font-family: 'Traffic';
  src: url('Fonts/Traffic/BTraffic.eot?#') format('eot'),  /* IE6–8 */
	   url('Fonts/Traffic/BTraffic.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	   url('Fonts/Traffic/BTraffic.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
@font-face {
  font-family: 'Yekan';
  src: url('Fonts/Yekan/BYekan.eot?#') format('eot'),  /* IE6–8 */
	   url('Fonts/Yekan/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
	   url('Fonts/Yekan/BYekan.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

/*layout*/
#header, #content, #footer {
	width: 970px;
	margin: 0 auto;
	direction: rtl;
}
#header {
	/*height: 160px;
	position: relative;*/

    background-image: url('Images/Arzi.jpg');
	background-repeat: no-repeat;
	background-position: center top;
}
#content {
	min-height: 400px;
	background-color: #F8F8F8;
	border: 1px solid #D5D5D5;
	border-radius: 6px 6px 0px 0px;
	padding: 0px 0px 20px 0px;
}

/*footer*/
#footer {
	color: #47667B;
	background-color: #EDEDED;
	font-size: 12px;
	line-height: 1em;
	padding: 10px 0;
	text-align: center;
}
#footer a {
	color: #47667B;
	font-size: 12px;
}

/*header*/
#header .login {
	color: #000;
	position: absolute;
	left: 0px;
	top:145px;
    width:160px;
}
#header .login a {
	color: #000;
    font-weight:bold;
}
#header .login a:hover {
	color: #FFFF99;
}
#header .site-logo {
	/*background-image: url('Images/site-logo.png');*/
	background-position: center top;
	background-repeat: no-repeat;
	width: 244px;
	height: 26px;
	position: absolute;
	right: 10px;
	top: 130px;
}
#header .ministry-logo {
	/*background-image: url("Images/Allah.png");*/
    background-position: center top;
    background-repeat: no-repeat;
    height: 140px;
    margin: 0 auto;
    width: 200px;
}

#header .ministry-logo2 {
	/*background-image: url('Images/Allah2.png');*/
	background-position: center top;
	background-repeat: no-repeat;
	width: 323px;
	height: 94px;
	margin: 0px auto;
}

/*Menu*/
ul#menu {
   background-image: url("Images/Menu.png");
    height: 45px;
    position: absolute;
    text-align: right;
    width: 970px;
    margin-top:-3px;
}
ul#menu li {
    background-image: url("Images/SideMenu.png");
	list-style: none;
	float: right;
	margin: 0 2px;
}
ul#menu li a {
     border-radius: 4px;
    color: White;
    display: block;
    font-size: 10pt;
    height: 12px;
    margin-top: 4px;
    padding: 5px 5px 10px 5px;
    text-align: center;
    margin-right:7px;
}
ul#menu li a.selected  {
	color: #333;
	/*background: #fff 0px -400px repeat scroll url('Images/bg-menu-bar.png');*/
    background-image: url("Images/bg-menu-bar.png");

}
ul#menu li a:hover {
	color: #333;
	/*background: #fff 0px -400px repeat scroll url('Images/bg-menu-bar.png');*/
    background-image: url("Images/bg-menu-bar.png");
}

#menu-side-left{
    background-image: url("Images/SideMenu.png");
    background-repeat:repeat-x;
    background-position:center bottom;
    float: left;
    height: 47px;
    margin-top: 2px;
    width: 196px;
}


#menu-side-right{
  background-image: url("Images/SideMenu.png");
    background-repeat:repeat-x;
    background-position:center bottom;
    float: right;
    height: 47px;
    margin-top: 2px;
    width: 196px;
}

/* Content */
 #content{
	width: 910px;
	padding: 0 20px;
 }
 
/* Common Class */
.title-bar{
	margin: 0px -20px;
	padding: 15px 20px;
	border: 1px none #D5D5D5;
	border-style: solid none;
	background-color: #EDEDED;
	font-weight: bold;
	font-size: 8pt;
	color: #444;
}



.titr-extra {
    background-color: #057CD8;
    border: 1px solid #0d8491;
    color: #000;
    line-height: 24px;
    margin: 0 -10px 20px;
    overflow: hidden;
    width: 923px;
}

.gradiant {
	min-height: 28px;
	border: 1px none #BFBFBF;
	border-style: solid none;
	
	background-color: #E9E9E9;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F1F1F1', endColorstr='#c9c9c9'); /* for IE */
	background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%, #F1F1F1),color-stop(100%, #c9c9c9));
	background-image: -webkit-linear-gradient(top, #F1F1F1, #c9c9c9);
	background-image: -moz-linear-gradient(top, #F1F1F1, #c9c9c9);
	background-image: -o-linear-gradient(top, #F1F1F1, #c9c9c9);
	background-image: -ms-linear-gradient(top, #F1F1F1, #c9c9c9);
	background-image: linear-gradient(top, #F1F1F1, #c9c9c9);
}
.page-navigation {
	padding: 32px 0px 0px 0;
	margin: 0 0 10px 0;
	font-size: 15pt;
	color: #057CD8;
	font-family: Titr, Arial;
	text-decoration: none;
	font-weight: normal;
	border-bottom: 3px double;
	display: block;
}
.disable {
	color: #aaa;
}
.hidden {
	display: none!important;
}
.clickable{
	cursor: pointer;
}
p.separated{
	padding: 0;
	margin: 20px 0;
}
.help-comment {
	background-color: #FFFFCC;
	border: 1px solid #CC9900;
	padding: 10px;
	border-radius: 4px;
	margin: 10px 0;	
}

.center{
	text-align : center
}

/* Styles for validation helpers */
.field-validation-error {
	color: #ff0000;
}
.field-validation-valid {
	display: none;
}
.input-validation-error {
	border: 1px solid #ff0000;
	background-color: #ffeeee;
}
.validation-summary-errors {
	font-weight: bold;
	color: #ff0000;
}
.validation-summary-valid {
	display: none;
}

/*button*/
.button, a.button, body .k-grid .k-button {
	 background-color: #057CD8;
    border: 1px solid #0d8491;
    border-radius: 4px;
    box-sizing: content-box;
    color: #020;
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    font-weight: normal;
    height: 18px;
    margin: 0 5px;
    min-width: 60px;
    padding: 3px 10px 7px;
    text-align: center;
    vertical-align: middle;
}
a.button{
	height: 18px;
	box-sizing: content-box;
}
input.button{
	height: 30px;
	box-sizing: border-box;
}

.button.small {
	padding: 3px 3px 7px 3px;
	min-height: 10px;
}
.button:active, a.button:active {
	border: 2px inset #4C8E0E;
	padding: 2px 10px 6px 10px;
}
.button.small:active, a.button.small:active {
	border: 2px inset #4C8E0E;
	padding: 2px 3px 6px 3px;
}

.button:hover, a.button:hover {
	background-color: #aad7fa;
	/*background-position: 0px -200px;*/
}
.button[disabled], .button[disabled]:active, .button[disabled]:hover {
    color: #333 !important;
    background: none !important;
    background-color: #ccc !important;
    border: 1px solid #999 !important;
    padding: 3px 10px 7px 10px !important;
    cursor: default !important;
}

/*box*/
.box {
	margin: 10px auto;
	width: 100%;
	background-color: #fff;
	border-radius: 4px 4px 0 0;
	position: relative;
}
.box .box-head, .box .box-head-small {
	background: #096596 0px -40px repeat scroll url('Images/navigation-bar.png');
	color: #fff;
	border-radius: 4px 4px 0 0;
	padding: 10px 15px;
	font-weight: bold;
	min-height: 16px;
}
.box .box-head.light {
	background-position: 0 0;
	background-color: #E6E6FF;
	color: #333;
	border: 1px solid #CCCCCC;
	border-radius: 0;
}
.box .box-head-small {
	padding: 4px 20px;
}
.box .box-body {
	color: #000;
	padding: 10px 20px;
	line-height: 180%;
	overflow: hidden;
	border: 1px solid #CCCCCC;
	margin: 0 0 20px 0;
}
.box .box-grid {
	background-color: #fff;
	color: #000;
	width: 100%;
	padding: 0;
	line-height: 180%;
	overflow: hidden;
	border-collapse: collapse;
}

.box .box-grid th {
    background-color: #057CD8;
    color: #fff;
    font-weight: normal;
    padding: 5px;
}

.small-box {
	line-height: 25px;
	float: right;
	margin: 10px 5px 15px 0;
	width: 210px;
	border: 1px solid #a0a0a0;
	border-bottom: 0;
}
.small-box .title {
	background-color: #ccc;
	color: black;
	padding: 2px 10px 3px;
	text-align: right;
	overflow: auto;
}
.small-box .body {
}
.small-img-box {
	float: right;
	width: 100px;
	padding: 15px 0;
}
.box-help {
	color: #034AF3;
	width: 800px;
}

/*calendar*/
.calendar {
	/*position: relative;*/
	border-color: #888;
	background-color: #FFF;
	z-index: 1;
}
.calendar, .calendar table {
	border: 1px solid #bbb;
	font-family: Tahoma;
}
.calendar .button {
	text-align: center;
	padding: 2px;
	font-weight: bold;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0px;
	display: table-cell;
	border-radius: 0px;
	border: 1px solid #E8EEF4;
	background-color: #eee;
}
.calendar thead tr {
	background-color: #eee;
}
.calendar thead tr td {
	border-bottom: 0px none #bbb;
}
.calendar thead .title {
	font-weight: bold;
	text-align: center;
	float: none;
	margin: 0px;
	width: 150px;
}
.calendar thead .hilite {
	background-color: #ccc;
}
.calendar thead .active {
	background-color: #aaa;
}
.calendar thead .daynames {
	background-color: #ccc;
}
.calendar thead .name {
	padding: 2px;
	text-align: center;
}
.calendar thead .weekend {
	color: #FF3333;
}

.calendar tbody .day {
	width: 2em;
	text-align: right;
	padding: 2px 4px 2px 2px;
}
.calendar tbody td.weekend {
	color: #ff3333;
}
.calendar tbody .day.othermonth {
	font-size: 80%;
	color: #999;
}
.calendar tbody .day.othermonth.oweekend {
	color: #f99;
}
.calendar tbody td.selected {
	font-weight: bold;
	border: 1px solid #888;
	padding: 1px 3px 1px 1px;
	background-color: #666666;
	color: #fff;
}
.calendar tbody td.hilite {
	background-color: #ccc;
	padding: 1px 3px 1px 1px;
	border: 1px solid #bbb;
}
.calendar tbody td.today {
	font-weight: bold;
}
.calendar tbody td.active {
	padding: 2px 2px 0px 2px;
}
.calendar tbody .disabled {
	color: #999;
}
.calendar tbody .emptycell {
	visibility: hidden;
}
.calendar tbody .emptyrow {
	display: none;
}

.calendar tfoot .footrow {
	text-align: center;
	background: #eee;
}
.calendar tfoot .ttip {
	padding: 2px;
	border-top: 1px solid;
}

.calendar .combo {
	position: absolute;
	display: none;
	top: 0px;
	left: 0px;
	width: 6em;
	cursor: default;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: #797979;
	background-color: #eee;
	color: #000;
	z-index: 100;
	font-size: 90%;
}
.calendar .combo .label, .calendar .combo .label-IEfix {
	text-align: center;
	padding: 1px;
}
.calendar .combo .label-IEfix {
	width: 6em;
}
.calendar .combo .hilite {
	background-color: #ccc;
	color: #000;
}
.calendar .combo .active {
	background-color: #888;
	color: #fff;
	font-weight: bold;
}

.calendar-input {
	float: right;
	display: block;
	width: 150px;
	height: 16px;
	direction: ltr;
}
.calendar-button {
	display: inline-block;
	background: url('Images/calendar.png');
	width: 16px;
	height: 16px;
}

/*Alert Dialog Css*/
.jDialog {
	min-width: 300px;
	max-width: 700px;
	padding: 0px;
	border: 1px solid #999;
	font-family: Tahoma;
	position: absolute;
	border-radius: 4px 4px 0 0;
	direction: rtl;
}
.jDialog #jalert_title {
	border-radius: 4px 4px 0 0;
	padding: 0px;
	height: 30px;
	background-color: #057CD8;
	position: relative;
	width: 100%;
	color: #FFFF99;
}
.jDialog #jalert_titletext {
	padding: 5px 0px;
	height: 20px;
	color: #fff;
	position: absolute;
	right: 15px;
}
.jDialog #jalert_content {
	position: relative;
	border: 0;
	padding: 10px;
	background-color: #eeeeee;
	overflow: auto;
}
.jDialog #jalert_message{
	padding-bottom: 10px;
    text-align:justify;
}
.jDialog #jalert_panel {
	text-align: center;
	margin: 10px 0 0 10px;
}
.jDialog #jalert_prompt {
	margin: 5px 0px;
}
.jDialog #jalert_panel input[type=button]{
	display: inline-block;
	/*background: #4C8E0E 0px -0px repeat scroll url('Images/bg-top.png');*/
	background-color: #057CD8;

	min-width: 80px;
	padding: 5px 10px;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	border: 1px solid #999;
}
.jDialog #jalert_panel input[type=button]:hover {
	background-color: #4C8E0E;
	background-position: 0px -40px;
}
.jDialog #jalert_panel input[type=button]:active  {
	border: 2px inset #095688;
	padding: 4px 10px;
}

/* Navigationbar Css */
ul.navigation-bar {
	list-style-type: none;
	display: inherit;
	clear: both;
	height: 40px;
	border: 1px solid #ccc;
	border-style: none solid none solid;
}
ul.navigation-bar li a {
	display: block;
	float: right;
	height: 20px;
	padding: 10px 0px;
	text-align: center;
	width: 150px;
}
ul.navigation-bar li.light a {
	background: #d3d3d3 url('images/NavigationBar/Light.png');
}
ul.navigation-bar li.dark a {
	background: #677b8e url('images/NavigationBar/Dark.png');
	color: #fff;
}
ul.navigation-bar li.light .next {
	display: block;
	float: right;
	width: 17px;
	height: 40px;
	background: #d3d3d3 url('images/NavigationBar/LightToLight.png');
}
ul.navigation-bar li.dark .next {
	display: block;
	float: right;
	width: 17px;
	height: 40px;
	background: #d3d3d3 url('images/NavigationBar/DarkToLight.png');
}
ul.navigation-bar li.light .light-to-dark {
	display: block;
	float: right;
	width: 17px;
	height: 40px;
	background: #d3d3d3 url('images/NavigationBar/LightToDark.png');
}

/* wizard navigation bar */
.wizard-bar{
	/*margin: 0px -20px;*/
	padding: 0;
	border: 1px none #D5D5D5;
	border-style: solid none;
	background-color: #EDEDED;
	color: #444;
}
.wizard-bar ul {
	list-style-type: none;
	clear: both;
	height: 40px;
	border: 1px solid #ccc;
	border-style: none solid none solid;
}
.wizard-bar ul li {
	display: block;
	float: right;
	position: relative;
	height: 40px;
}
.wizard-bar ul li a {
	display: block;
	float: right;
	height: 20px;
	padding: 6px 10px 14px 0;
	text-align: center;
	width: 103px;
	background:transparent url('images/navigation-bar.png') repeat scroll 0 0px;
}
.wizard-bar ul li.selected a {
	background: transparent url('images/navigation-bar.png') repeat scroll 0 -40px;
	color: #e0e0e0;
}
.wizard-bar ul li span {	
	background: transparent url('images/navigation-bar.png') repeat scroll 0 -80px ;
	display: block;
	float: right;
	width: 10px;
	height: 40px;
	position: absolute;
	left: -10px;
	z-index: 1;
}
.wizard-bar ul li.selected span {	
	background: transparent url('images/navigation-bar.png') repeat scroll 0 -120px ;
}

.item-box {
	margin: 0 0 20px  0;
}
.item-box label {
	display: inline-block;
	padding: 0 0 5px 5px;
    width: 271px;
	text-align: left;
	vertical-align: top;
	vertical-align: baseline;
}

.dialog .dialog-button-box{
	padding: 20px 0 5px 0;
}
.dialog textarea{
	width: 100%;
	min-height: 80px;
}
.dialog .item-box{
	margin: 0 ;
}

.month-selector {
	height: 40px;
	background-color: #ededed;
	border: 1px solid #cdcdcd;
	margin: 0 auto;
}
.month-selector #previous-day, .month-selector #next-day {
	float: right;
	margin: 10px 20px;
}
.month-selector #previous-month, .month-selector #next-month {
	float: right;
	margin: 10px 20px;
}
.month-selector .year-select, .month-selector .month-select, .month-selector .day-select {
	float: right;
	margin: 5px 2px;
	width: 80px;
}

/* Student Appointment */
.student-appointment-free {
	background-color: #CCFFCC;
}
.student-appointment-free:hover {
	background-color: #9DFF9D;
	cursor: pointer;
}
.student-appointment-full {
	background-color: #ddd;
}
.student-appointment-selected {
	background-color: #FB95B9;
}
.student-appointment-disable {
	background-color: #ddd;
}

/* List */
ul.list {
	list-style-type: square;
	margin: 30px 10px;
}
ul.list li {
	margin: 0px 30px 5px 0px;
	line-height: 2em;
}
ul.list li a {
	font-size: 10pt;
}
ul.list li .disable {
	color: #999;
}
ul.list li p {
	color: #999;
	padding: 10px;
}

/* Small Form*/
.small-form{
	line-height: 2em;
}
.small-form .button-row{
	overflow: auto;
	padding: 10px 0;
}

/* Grid Pager */
.grid-pager {
	text-align: center;
	margin: 5px auto;
	width: 600px;
}
.grid-pager span, .grid-pager a {
	border: 1px solid #CCCCCC;
	display: inline-block;
	font-size: 9pt;
	padding: 1px 5px;
	text-decoration: none;
	min-width: 20px;
	margin: 0 2px;
}
.grid-pager span {
	color: #00188C;
	cursor: default;
}
.grid-pager span.current-page {
	background-color: #057CD8;
	border: 1px solid #B3C0FF;
}
.grid-pager a {
	color: #333;
}
.grid-pager a:hover {
	background-color: #D2DAFF;
	border: 1px solid #B3C0FF;
}
.grid-button-box {
	float: right;
}
.a-hidden {
	color: PowderBlue;
}

/* View-Edit*/
.view-edit{
}
.view-edit .edit-box{
	display: inline-block;
	margin-top: 5px;
}
.view-edit .view-box{
	display: inline-block;
}
.head-left{
	position: absolute;
	left: 2px;
	top: 0px;
}

/* Icon */
.icon {
	background-image: url('Images/Icon.png');
	background-repeat: no-repeat;
	background-color: transparent;
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
}
.icon.empty {
	background-position: 0px 0px;
}
.icon.accept {
	background-position: 0px -16px;
}
.icon.delete {
	background-position: 0px -32px;
}
.icon.question {
	background-position: 0px -48px;
}
.icon.right-arrow {
	background-position: 0px -64px;
}
.icon.left-arrow {
	background-position: 0px -80px;
}

.icon32 {
	background: transparent url('Images/Icon.png') no-repeat;
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
}
.icon32.empty {
	background-position: -128px 0px;
}
.icon32.accept {
	background-position: -128px -32px;
}
.icon32.delete {
	background-position: -128px -64px;
}
.icon32.question {
	background-position: -128px -96px;
}
.icon32.warning {
	background-position: -128px -128px;
}

.fix-height-box{
	height: 150px; 
	overflow: auto;
}


/*Captcha*/
.field-validation-error {
	/*padding: 5px;*/
	color: #b60000;
}

.chaptcha-panel {
	float: right;
}

	.chaptcha-panel img {
		border-radius: 5px 0 0 5px;
	}

	.chaptcha-panel input {
		border-radius: 0 5px 5px 0;
		width: 45px;
		margin-left: 5px;
		height: 22px;
	}

	.chaptcha-panel.sign-up {
		margin-left: 27px;
	}

.field-validation-valid {
	display: none;
}

.validation-summary-errors {
	color: #e80c4d;
	font-weight: bold;
	font-size: 1.1em;
}

.validation-summary-valid {
	display: none;
}

.expand {
    display: block;
}

.collapsed {
    display: none;
}

/*.row {
    border-bottom: 1px solid #d7d7d7;
    overflow: auto;
    padding: 5px;
}*/

#gotop {
    background-image: url(Images/go-top.png);
    background-repeat: no-repeat;
    bottom: 30px;
    cursor: pointer;
    display: block;
    height: 64px;
    position: fixed;
    right: 115px;
    width: 64px;
}

.col {
    float: right;
    padding: 0 5px;
}

    .col.small {
        width: 204px;
    }

    .col.medium {
        width: 200px;
    }

    .col.large {
        width: 440px;
    }

    .col.Xlarge {
        width: 890px;
    }

    body .editor-label-Costomized {
    text-align: right;
    margin-left: 5px;
    margin-bottom: 0;
    /*float: right;*/
    /* background-color: #e9e9e9; */
    padding: 0;
    width:200px;
}

    .row {
    border-bottom: 1px solid #d7d7d7;
    overflow: auto;
    padding: 5px;
}