

#portal-content { width:95%; margin:15px auto 40px; padding-left: 20px; padding-right: 20px; }
#portal-content form { display:block; }

.portal-page-title { margin-left:0; font-size:24px; font-weight:bold; margin-bottom:15px; }
#portal-content h3 { font-size: 20px; }


/* ############### General Styling ################## */

#portal-content p { margin:10px 0px; }
.form-buttons { text-align:center; clear:both; padding:10px 0; margin-top:10px; }

#portal-content .browse_btn { width:200px !important; display:inline-block !important; background-color: #fff !important; border: solid 1px #cdced1 !important; color: #767475 !important; padding-top: 0 !important; height:28px !important; line-height: 2; }

#portal-content div.img_upload_btn { text-align: center; position: relative; overflow: hidden; font-size:14px; }
#portal-content input.img_upload_btn {
    position: absolute; display: block; top: 0px; right: 0px; margin: 0px;
    opacity: 0; font-size: 200px; direction: ltr; cursor: pointer; width: 100%; height: 100%;
}
.header-title { margin: 10px 0;}
.status { text-transform:capitalize; }
.status a { text-decoration:underline;}

.required-star { color:#F00; font-family: helvetica; }
#TestAlertMessage { color:#F00; }

#portal-content input, #portal-content select { background-color: #f7f7f7; border: solid 1px #a7a9ac; padding: 2px 2px; margin: 0 0 2px; }
#portal-content textarea { min-height:85px; font-size:14px; line-height: 20px; }
#portal-content input[type="radio"]{width:30px;}
.datepickerwrapper div{width:105px;}
#portal-content input.datePicker{width:75px; display:inline-block; font-size:10pt; height:auto;}
hr.myProfile, hr.checkout { margin: 15px 0 10px; border:none; border-bottom:#000 solid 1px; }

#portal-content button.ui-datepicker-trigger { padding: 0 5px; background: #888; height: 27px; margin:0 0 2px 5px; }
.ui-datepicker-trigger { border:none; background:none; }
.ui-datepicker .ui-widget-header, .ui-datepicker .ui-datepicker-header { background: #e9e9e9 !important; color: #333333 !important; }
.ui-state-hover { border: 1px solid #cccccc !important; background: #ededed !important; font-weight: normal; color: #2b2b2b !important; }
.ui-datepicker td .ui-state-hover { background: #ededed !important; color: #2b2b2b !important; }
.ui-datepicker thead { border: 1px solid #dddddd !important; background: #ffffff !important; color: #333333 !important; }
.ui-datepicker-month, .ui-datepicker-year { padding:0 !important;}
.ui-datepicker td.ui-datepicker-current-day .ui-state-default { color: #555 !important; }

/* ############### Login Styling ################## */
#portal-content #inputUsername, #portal-content #inputPassword { margin-bottom:0; }
#portal-content .errorMessage { color:red; }

/* ############### Dashboard Styling ################## */

#portal-content table { font-size: 12px; }
.admin_dashboard#listing_table th:nth-child(1), .admin_dashboard#listing_table td:nth-child(1) { font-size:14px; width: 350px; }
.admin_dashboard#listing_table td:nth-child(4), .admin_dashboard#listing_table td:nth-child(5) { /*width:50px;*/ }
.admin_dashboard#listing_table th:nth-child(4), .admin_dashboard#listing_table th:nth-child(5) { width:30px; }

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    overflow: hidden !important;
}

#portal-content #listing_table_filter input {margin-left: 5px;}

/* ############### Checkout Styling ################## */
.page-payment form { margin-left: 10px; width:90%; max-width:1200px; }
.page-payment .required-star { margin-right: 2px; }
.page-payment td { border: none; }
.page-payment label { margin-right:2px; float: right;  }
.page-payment input, .page-payment select { background-color:#f7f7f7; border: solid 1px #a7a9ac; padding:5px; margin: 5px 0 15px; width:100%; line-height: 1; }
.page-payment .expDate select { width:40%; }

.page-payment .payment-info label { float:none; margin-bottom: 0; }
.cc-payment {}
.cart_display_r, .cart_display_l { font-size:14px; }

/* ############### Form Page Styling ################## */
.viewtype.intro .admin_flag input[type="checkbox"] { width: 25px; }
.viewtype.intro .row input, .viewtype.intro .row select { width:100%; font-size:14px; }
.viewtype.intro .row input.sm_inc {width:100%; max-width:250px;}
.viewtype.intro label {  font-weight: bold; font-size:14px; padding-right:4px; margin-bottom:0; }

.viewtype.intro .row { padding-bottom:8px; } 
.viewtype.intro .row.nob { padding-bottom:0; } 
.viewtype.intro .row.area input, .viewtype.intro .row.area select { width:60%;}
.viewtype.intro .row .share1 input, .viewtype.intro .row .share1 select { width:70%;}
.viewtype.intro .row .share2 input { width:calc(100% - 35px); }
.viewtype.intro .row .share2 label { width:35px;}
.viewtype.intro .row.share3 label { width:calc(100% - 35px); display:inline-block; }
.viewtype.intro .row.share3 input { width:30px; display:inline-block; }
.viewtype.intro .row.phone input { width:55%;}
.viewtype.intro .row.phone .fax input { width:75%;}
.viewtype.intro .row.contact input, .viewtype.intro .row.contact select { width:50%;}
.viewtype.intro .row.contact .col-md-2 { border-right:solid 1px #555;}

.viewtype.intro .row.comp_host { padding-bottom:30px; margin: 0 0 5px; }
.viewtype.intro .row.comp_host input { width:15px; }
.viewtype.intro .row.comp_host td{padding:2px 5px;}
.viewtype.intro .row.comp_host .group td:nth-child(1) {background-color:#dbdbdb;}
.viewtype.intro .row.comp_host tr.odd:hover td,.viewtype.intro .row.comp_host tr.even:hover td{background-color:#EEEEEE;}


.viewtype.intro #start_date, .viewtype.intro #end_date, .viewtype.intro #online_enhanced_start_date, .viewtype.intro #online_enhanced_end_date { width:70%;}

.viewtype .type-info label { font-size:0.8rem; }
.viewtype .type-info .col-md-8, .viewtype .type-info .col-md-9 { text-align: right; }

.viewtype.intro .footnote { font-size:0.8rem; text-align: left; margin:0; }
.viewtype .type-info p.footnote { margin-top: -15px !important; font-size:0.75rem !important; text-align: right; }
.viewtype p.footnote.right { text-align: right !important; padding-bottom:2px; }

.viewtype.intro h3.section { width:100%; text-align:center; border-bottom: 1px solid #000; line-height:0.1em; margin:10px 0 20px; } 
.viewtype.intro h3.section span { background:#fff; padding:0 10px; font-weight:bold; }

#portal-content .section.basic-info p { background:#dbdbdb; }
#portal-content .section p { margin:0; padding:5px 4px 10px; }

.viewtype.options .col1 { text-align: right;}
.viewtype.options .price { font-weight:bold; }


#portal-content .entry-form .display-msg { margin-top:15px; }

#img-preview { /*max-width:250px;*/ padding-bottom:10px; }
#img-preview .remove{   
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
  max-width:200px;
}
#img-preview .remove:hover {
  background: white;
  color: black;
}

#portal-content #img-preview img { max-width: 200px; }
#portal-content #img-1, #portal-content #img-2 { display: inline-block; }
#portal-content #upload_msg { display:inline-block; color:red; font-size:12px; }
.entry-field .col2 .display-field { min-width: 300px; max-width: 500px; margin-bottom:0; }

#portal-content .note { font-size:10px; }


.viewtype.options input { width:100%; }
/*#portal-content .viewtype.intro label{ margin-right:5px; }*/

/* ############### Purchase Options Styling ################## */
#portal-content .cart_display .remove_purchase { text-decoration:underline; color:red; } 
#portal-content .cart_display .remove_purchase:hover { cursor:pointer; } 
#portal-content .cart_display h3 { margin-top:0; }
#portal-content .cart_display { display:inline-block; float: right; min-width: 250px; max-width:500px; width:425px; }
#portal-content .cart_display table { width:100%; }
#portal-content .cart_display table .tax td:first-child, #portal-content .cart_display table .total td:first-child { /*text-transform:uppercase; color:#6d6e71;*/ }
#portal-content .cart_display td:first-child { width:84%; }
#portal-content .cart_display td:nth-child(2) { width:16%; text-align:right; }
#portal-content .cart_display td {padding: 0; line-height: 200%;}

/* ############### Button Styling ################## */

.noty_message{ height:45px; font-size:16px !important; line-height: 18px !important; }
.admin-products-menu .btn { padding: 4px 6px !important; }

#portal-content button.btn  {
    background-color: #333 !important;  border: 0 none !important; font-size: 12px !important; padding: 0.5em 0.5em !important; margin: 0 1px !important; border-radius: 0 !important; line-height: 1; background-image:none; color:#FFF !important;
}
#portal-content button.btn:hover {  background-color: rgba(51, 51, 51, 0.7) !important; outline: 0 none; }
#portal-content button.btn.btn-primary:hover { background-color: rgba(246, 142, 103, 0.7) !important; }
#portal-content button.btn.btn-yellow:hover { background-color: rgba(235, 147, 22, 0.7) !important; }
#portal-content button.btn.btn-red:hover { background-color: rgba(217, 83, 79, 0.7) !important; }
#portal-content button.btn.btn-info:hover { background-color: rgba(42, 171, 210, 0.7) !important; }

#portal-content button.addnew_button { margin-right:10px; }
#portal-content button.btn.btn-primary  {
    background-color: rgb(246, 142, 103) !important;
    border: 3px solid rgb(189, 190, 192) !important;
    padding-bottom: 6px !important;
    padding-top: 6px !important;
	min-height:36px;
}
#portal-content button.btn.btn-yellow { background-color: #eb9316 !important; }
#portal-content button.btn.btn-red  { background-color: #d9534f !important; }
#portal-content button.btn.btn-info  { background-color: #2aabd2 !important; }
#portal-content button.btn.btn-info-active{ background-color: #008000 !important; }
#portal-content button.btn.btn-info-inactive{ background-color: #ff0000 !important; }

div.ui-datepicker-header { background: #e9e9e9; }
table.ui-datepicker-calendar { background-color: #fff; }
table.ui-datepicker-calendar td .ui-state-default { background: #f6f6f6; } 

.ui-dialog.ui-widget.ui-widget-content { background-color: #fff; }

/* ############### PREVIEW. ################## */

#portal-content .preview_wrapper.preview { width:300px; margin:auto; float:right; }
#portal-content .preview_wrapper.preview .se_preview { border: 1px solid #a6c9e2; margin-bottom: 10px; }
#portal-content .preview_wrapper .se_preview p { font-weight:bold; color: #f68e67; font-size:15px; text-align:left;  }
#portal-content .preview_wrapper.approve, .preview_wrapper.thankyou { max-width:600px; margin:auto; /*text-align: center;*/ }
#portal-content .preview_approve { width: 80%; margin: auto; }
#portal-content .preview_wrapper table { table-layout:fixed; width:100%; }
#portal-content .preview_wrapper table td { padding: 0; line-height: 125%; word-wrap: break-word; font-size:12px; max-width: 200px;/*word-break: break-all;*/ border:none; }
#portal-content .preview_wrapper table td.style2 { word-break: break-all; }

/*.se_preview { display:inline-block; float:left; }*/
.se_preview p { }
.topRow { position: relative;padding-right: 40px; }
.company_heading { color:#000; font-weight:bold; padding-bottom: 4px !important; text-transform:capitalize; }
.A .company_heading { color:#cd8952; font-size:14px !important;  }
.company_heading.bold { color:#b83936;  font-size:18px !important; }
.se_preview img { max-width:90%; }
.se_preview { font-size: 15px; font-family: 'Arial'; font-stretch: condensed; padding: 0 10px 20px; text-align: left; margin:auto; max-width: 240px; }

.adv_listing { font:"Times New Roman", Times, serif; color:#cd8952;/*color:#7e272b;*/ text-transform:uppercase; }

.viewtype.approve p { clear:both; }
#approve_CSM{ float: right; /*margin-right: 15px !important;*/ margin: 5px 0 0 !important; }
.grn { color: #77982e; }

/* ############### MISC. ################## */

.nom { margin:0 !important; }
.nop { padding:0 !important; }
.style_i { font-style: italic;}
.hidden { display:none; }
.qtip-default { border: 1px solid #F1D031 !important; background-color: #FFFFEA !important;/*background-color: #FFFFA3 !important;*/ }
.tooltiptext { margin:10px 25px; font-size:16px; line-height:150%; }

.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000 !important;  }
.ui-dialog-titlebar-close {
  background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
  border: medium none;
}
.ui-dialog-titlebar-close:hover {
  background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
}

/* ############### Soccer listing ################## */
.soccer_listing { max-width: 15px; opacity: 0.7; margin-left: 5px; display:inline-block; }
.soccer-info .row { padding-top:5px; padding-bottom:10px; }

/*********************
* Responsive 
*********************/
@media screen and (max-width: 1020px) {
	#leaderboard { display:none; } 
	#portal-content p, #portal-content .left_wrapper, .bookings_table { font-size: 14px; }
	body .site { top: 50px;	}
	input, textarea { color: #000000; }
	
	.viewtype.companyDetails .preview_wrapper, .viewtype.keywords .preview_wrapper, .viewtype.companyDetailsPS .preview_wrapper { display:none; }
	.viewtype.companyDetails .left_wrapper, .viewtype.keywords .left_wrapper, .viewtype.companyDetailsPS .left_wrapper { width:100%; }
	
	#portal-content .preview_approve { font-size: 14px; width: 90%;	}
	
	#portal-content .page-payment, #portal-content .page-payment p { font-size: 12px; }
	#portal-content .page-payment input, #portal-content .page-payment select { padding:2px !important; }
	#portal-content .page-payment form { width:100%; margin:0; }
	.page-payment .payment-info, .page-payment .payment-fillform, #portal-content .cart_display { width:100%; }
	.page-payment #cardHolderName { width:200px; }
	.page-payment #ccnumber { width:150px; }
	.page-payment #expDateYY { width:75px;}
	.page-payment #security_code { width:45px;}
	
	.page-payment .payment-info td { vertical-align: top; }
	.page-payment .payment-info tr:nth-child(1) td:nth-child(1) { width:40% !important; }
	.page-payment .payment-info tr:nth-child(1) td:nth-child(2) { width:60% !important; }
	
	#portal-content .page-payment .payment-fillform label { width:80px; margin-right: 10px; }
	#portal-content .page-payment .payment-fillform input { width:100px; margin-right: 10px; padding:2px; }
}

@media screen and (max-width: 800px) {
	#portal-content p, #portal-content .left_wrapper, .bookings_table { font-size: 12px; }
	
	.entry-field .col2 { display: block; }
	.entry-field .col2 input, .entry-field .col2 textarea, .entry-field .col2 select { width:90%; }
		
	#portal-content .distributor_header div { width: 33%; }
	#portal-content .num_distributors input, #portal-content .num_distributors select {	width: 30%; padding:2px; margin:2px; font-size:11px; }
}


@media screen and (max-width: 650px) {
	#portal-content { padding-left: 10px; padding-right: 10px; }
	.portal-page-title { font-size:18px; }
	
	#portal-content button.btn { font-size: 11px !important; padding: 5px 10px !important; }
	#portal-content .left_wrapper #repeat_PSM { padding: 5px 10px !important; }
	
	#portal-content p, #portal-content .left_wrapper, .bookings_table { font-size: 11px; }
	
	#portal-content .loginPage input { width: 100px; } 
	#portal-content .viewtype.intro label[for="quebec_listing"] { display:block; margin-bottom: 10px; } 
	
	.entry-field .col2 { display: block; }
	.entry-field .col2 input, .entry-field .col2 textarea, .entry-field .col2 select { width:90%; }
		
	#portal-content .distributor_header div { width: 33%; }
	#portal-content .num_distributors input, #portal-content .num_distributors select {	width: 30%; padding:2px; margin:2px; font-size:11px; }
	.viewtype.keywords .form-buttons { padding-top:30px;  }
	
	#portal-content .cat-page label.header { font-size: 14px; }
	#portal-content h3.top .num_selected, #portal-content h3.top .right { font-size: 10px; clear:both; display:inline-block; margin-left: 5px; margin-right:5px; }
	.ui-accordion .ui-accordion-header .ui-icon { top: 28% !important;	}
	.ui-accordion .ui-accordion-content { clear:both; padding: 1em 15px !important; }
	
	#portal-content .comparison_table { overflow:scroll; max-width:500px; }
	
	#portal-content .preview_approve { font-size: 11px; width: 90%;	}
	#portal-content .preview_wrapper .psm_preview, #portal-content .preview_wrapper .ps_preview { font-size:12px !important; }
	
	#portal-content .page-payment label { font-size:11px; }
	.page-payment #cardHolderName { width:150px; }
	.page-payment #sCardType { width:100px; margin-right:10px; }
	.page-payment #ccnumber { width:100px; }
	.page-payment #expDateYY { width:75px;}
	.page-payment #security_code { width:45px;}
	
	
	#portal-content .page-payment .payment-fillform label { width:80px; margin-right: 10px; }
	#portal-content .page-payment .payment-fillform input { width:100px; margin-right: 10px; padding:2px; }
	
}
