@import "variables.css";

.clear { clear:both; }
a { text-decoration: none;}

/* ----------------------------------------------------------------------------------------------------------
Navigation Bar
---------------------------------------------------------------------------------------------------------- */
.navbar .dropdown-menu, .navbar li a, .alert-heading { text-transform: capitalize; }
.navbar li img, .user-profile-menu i { margin-right: 5px; }
.navbar-cucp { background-color: var(--fw-bg-color2) !important; padding: 3px; }
.navbar-cucp .navbar-nav a { font-size: var(--font-size-base); }
.navbar-toggler { font-size: var(--font-size-base); }

/* invert menu bar svg icon
.nav-link img { filter: invert(100%); }
*/

.content-stage { margin-top: 50px; }
footer { border-top: 1px solid #ddd; margin-top: 18px; padding-top: 10px; }

/* ----------------------------------------------------------------------------------------------------------
Content
---------------------------------------------------------------------------------------------------------- */
.content-title { margin-top: 10px; background-color:var(--fw-bg-color2); text-align:left; padding:5px 5px 5px 20px; color:var(--fw-font-color); font-weight:bold; line-height: 25px; border-radius: 2px; text-transform: capitalize; }
.content-area { background-color:#f3f5f6; padding: 15px 10px 0 10px; margin: 10px 0 15px 0; border-radius: 2px; }

/* ----------------------------------------------------------------------------------------------------------
Table
---------------------------------------------------------------------------------------------------------- */
div.table-responsive { overflow-x: scroll; }
.table { margin-bottom: 0; width: 100%; }
.table th, .table tbody tr:hover th { background-color: var(--fw-bg-color2); padding: 5px; color: var(--fw-font-color); text-align: left; vertical-align: top; line-height: 25px; text-transform: capitalize; }
.table th a { color: var(--fw-font-color); text-transform: capitalize; text-decoration: none; }
.table th.align-right, .table td.align-right { text-align: right; }
.table th.align-center, .table td.align-center { text-align: center; }
.table tbody tr th, .table tbody tr td { vertical-align: middle; }
.table tfoot { font-weight: bold; }
.table tfoot tr td { border-top: 2px solid #555; border-bottom: 2px solid #555; }
.btn-result-link { padding: 3px; border:1px solid #888; font-size: 3rem;}
.btn-result-link span { font-size: 1rem;}
.table td { padding: 10px; }
.table > :not(:first-child) { border-top: 2px solid #ddd; }
.table-striped > tbody > tr:nth-of-type(2n+1) > * { background-color: #fff;}

/* ----------------------------------------------------------------------------------------------------------
Button
---------------------------------------------------------------------------------------------------------- */
.btn-primary { background-color: #428bca; border-color: #357ebd; color: var(--white); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {color: #ffffff; background-color: #3276b1; border-color: #285e8e; }
.btn-info { background-color: #5bc0de; border-color: #46b8da; color: var(--white); }
.back-link.btn, .custom-back-link.btn { background-color: var(--gray-dark); color: var(--white); }

/* ----------------------------------------------------------------------------------------------------------
Badge
---------------------------------------------------------------------------------------------------------- */
.badge-primary { background-color: var(--brand-primary); }
.badge-success { background-color: var(--brand-success); }
.badge-warning { background-color: var(--brand-warning); }
.badge-danger { background-color: var(--brand-danger); }
.badge-info { background-color: var(--brand-info); }

/* ----------------------------------------------------------------------------------------------------------
Pagination
---------------------------------------------------------------------------------------------------------- */
div.pagination { margin: 10px 5px 0 5px; text-align:center; float:left; font-size:10px; color: var(--fw-bg-color2); }
div.pagination a { padding: 7px 7px; margin-right: 8px; border: 1px solid var(--fw-bg-color2); text-decoration: none;  color: var(--fw-bg-color2); float:none; }
div.pagination span { padding: 7px 7px; margin-right: 8px; }
div.pagination a:hover, div.pagination a:active { border:1px solid #ddd; color: var(--fw-font-color); background-color: var(--fw-bg-color2); }
div.pagination span.current { border: 1px solid #ddd; font-weight: bold; background-color: var(--fw-bg-color2); color: var(--fw-font-color); }
div.pagination span.disabled { border: 1px solid #ddd; color: #ccc; }
div.pagination .set-row-per-page { border: 1px solid #ddd; background-color: var(--fw-font-color); font-size: 10px; color: var(--fw-bg-color2); margin-bottom: 0; line-height: 35px; width: 120px; height: 30px; }

/* ----------------------------------------------------------------------------------------------------------
Zend Form
---------------------------------------------------------------------------------------------------------- */

.form-control { appearance: auto; }

textarea, .zend_form dd textarea { width: 600px; height: 120px; border:1px solid #d6d6d6; color:#414141; margin-bottom: 5px;  border-radius: 2px; }
textarea.tinymce, .zend_form dd textarea.tinymce { width: 610px; height: 320px;}
div.mce-fullscreen { z-index: 1000; }
.btn { text-transform: capitalize; font-size: var(--font-size-base); }
.input-prepend.date-pick { width: 120px !important; }
.input-group .form-control { font-size: 0.8rem;}

.input-group .red { background-color: var(--red); border: 1px solid var(--red); color: var(--white);}
.input-group .blue { background-color: var(--blue); border: 1px solid var(--blue); color: var(--white);}
.input-group .green { background-color: var(--green); border: 1px solid var(--green); color: var(--white);}

.zend_form { margin-top: 0; padding-bottom: 10px; clear:both;  }
.zend_form dt.has-fieldset { width: 0%; }
.zend_form dd fieldset legend { line-height: 30px; padding-left: 1%; font-weight: bold; text-transform: capitalize; font-size: 14px; border: 1px solid var(--fw-bg-color3); background-color: var(--fw-bg-color3); color: var(--fw-font-color3); border-radius: 2px; width: 99%; margin-bottom: 15px; }
.zend_form dd fieldset dl{ margin-top: 10px; }
.zend_form dd fieldset dl dd ul { padding-left: 0; }
.zend_form dd.has-fieldset { width: 100%; margin-left: 0; margin-bottom: 20px; }

.zend_form dt { text-align: right; width: 30%; float:left; color: #404040; text-transform: capitalize; height: 37px;}
.zend_form dt label { padding-right: 10px; text-transform: capitalize; line-height: 30px; }
.zend_form dd { width: 65%; min-height: 37px; margin: 0; float:left; margin-left: 10px; position: relative; }

.zend_form dd.longtext { padding-bottom: 20px; }
.zend_form dd ul.errors { font-size: 1em; color: #f00; margin: 5px 0 5px 0px; list-style-type: none; padding: 0; }
.zend_form dd ul { font-size: 1em; margin: 2px 0 5px 0; list-style-type: none; }
.zend_form dt.view_page_link, .zend_form dt.force-new-line { clear: left; }
.zend_form dd.view_page_link { width: 60%; line-height: 35px; }
.zend_form .input-textarea + .errors { margin-left: 50px; margin-top: -20px; }
.zend_form.form-btn dd a { margin-top: 5px; }
.input-group.input-text.input-textarea { margin-bottom: 5px; }

#add-form-id .zend_form .input-group { width: 80%; }
#add-form-id .zend_form .input-group.ac-result-icon { width: 32px; }
#add-form-id .zend_form .input-group input { width: 80%;}

.input-group input { font-size: var(--font-size-base); }

@media (min-width: 979px)
{
	.zend_form dt { width: 19%; }
	.zend_form dd { width: 28%; }
	.zend_form dd.two-cols { width: 75%; }
	.has-errors .zend_form dt, .has-errors .zend_form dd { margin-bottom: 15px; }
	body[class*="view-page"] .zend_form dt, body[class*="view-page"] .zend_form dd { margin-bottom: 0; }
	.zend_form dt.multiselect-label, .zend_form dt.textarea-label, .zend_form dt.tinymce-label { clear: left; }
	.zend_form dd.multiselect-element, .zend_form dd.textarea-element, .zend_form dd.tinymce-element { width: 75%; }
	.zend_form dt.multiselect-element { width: 60%; }
	.zend_form select.multiselect + div { margin-bottom: 0; }
	.zend_form dd ul.errors { position: absolute; top: 28px; left: 0px; }
	
	.search-form .zend_form dt { width: 150px; margin-bottom: 0; }
	.search-form .zend_form dd { width: 250px; margin-left: 0px; margin-bottom: 0; }
	.search-form #submit-label { clear: left; width: 150px; }
	.search-form #submit-element { margin-left: 0; clear:right; }
	.search-form .zend_form dd.from-date-element { width: 85px; margin-left: 0px;}
	.search-form .zend_form dt.to-date-label { width: 65px; margin-left: 0; }
	.search-form .zend_form dd.to-date-element { width: 100px; margin-left: 0px;}
}

@media (min-width: 1899px)
{
	.search-form .zend_form dt { width: 180px; }
	.search-form #submit-label { width: 180px; }
}

.zend_form.form-view { margin-bottom: 0; padding-bottom: 0; }

ul.errors { clear:left; }
.view-media-link img { max-width: 300px; max-height: 300px; margin-bottom: 10px; padding: 5px; border: 1px solid #ccc; }

.search-menu { float: right; margin-right: 10px; }
.search-menu a { color : #fff; margin-left: 10px; text-transform: capitalize; }
.order-icon, .link-icon { margin-right: 2px; font-size: 1rem; }

/* ----------------------------------------------------------------------------------------------------------
Log
---------------------------------------------------------------------------------------------------------- */

.log { font-size:12px; margin-left:10px; margin-bottom: 20px; padding: 10px 0 10px 0px; width:98%; border-radius: 2px; border: 1px solid #d6d6d6; }
.log dt { text-align: right; width: 30%; float:left; color: var(--gray-dark); }
.log dd { width: 65%; color: var(--gray-dark); min-height: 25px; margin: 0 0 0 10px; float:left;  }

/* ----------------------------------------------------------------------------------------------------------
Log in
---------------------------------------------------------------------------------------------------------- */
.login { text-align: left; margin: 20px auto; width: 380px; margin-left: -14px; }
.login-form form, .login-form dl { margin-bottom: 0; }
.login-form dt { width: 90px; }
.login-form dd { width: 250px;}
.login-form input { width: 200px; }
.login-form form input[type=submit] { width: 215px; }
.login .top_left_box { width:357px; height:10px; background:url(../../../img/account/login_top_box_bg.gif) no-repeat center; }
.login .center_left_box { width:357px; background:url(../../../img/account/login_center_box_bg.gif) repeat-y; padding-bottom: 15px;}
.login .bottom_left_box { width:357px; height:10px; background:url(../../../img/account/login_bottom_box_bg.gif) no-repeat center; }
.box_title { width:357px; text-align:center; font-size:18px; color:#615357; padding:15px 0 25px 0; }
.box_title span { font-weight:bold; color:#d8325d; }

/* ----------------------------------------------------------------------------------------------------------
Account
---------------------------------------------------------------------------------------------------------- */
.zend_form dd.account-users, dd.account-groups, dd.account-permissions { width: 300px; padding-bottom: 10px; clear: right; margin-top: -8px; }
.account-users li, .account-groups li, .account-permissions li { float:left; width: 240px; line-height: 30px; }

@media (min-width: 979px)
{
	.login { margin: 20px auto; } 
	.zend_form dd.account-users, dd.account-groups, dd.account-permissions { width: 730px; }
}

@media (min-width: 1899px) 
{
	.zend_form dd.account-users, dd.account-groups, dd.account-permissions { width: 1000px; }
}

/* ----------------------------------------------------------------------------------------------------------
Flash msg
---------------------------------------------------------------------------------------------------------- */
.flash-msg { width: 80%; margin-left: 10%; top: 50px; }
.flash-msg ul { margin-left: 20px; }
.flash-msg .alert-heading { text-transform: capitalize; }

/* ----------------------------------------------------------------------------------------------------------
API List
---------------------------------------------------------------------------------------------------------- */
ul.api-list { padding: 0; list-style: none; margin: 0; }
ul.api-list ul { list-style: none; }

/* ----------------------------------------------------------------------------------------------------------
Block UI
---------------------------------------------------------------------------------------------------------- */
div.blockMsg h1 { font-size: 14px; text-decoration: blink; color:var(--gray-dark); padding: 1px; background-color: var(--white); line-height: 24px; border: 1px solid #000; width: 40%; left: 30%; position: absolute; }

/* ----------------------------------------------------------------------------------------------------------
Tab buttons
---------------------------------------------------------------------------------------------------------- */
.tab-buttons { width: 100%; border-bottom: 7px solid var(--fw-bg-color); margin-top: 2px; }
.tab-buttons ul { margin-left: 0; }
.tab-buttons ul li { float:left; list-style: none; padding: 0px; min-height: 27px;
	background-color: var(--fw-font-color); margin: 5px 5px 0 0;
	border-right: 1px solid #000;
	border-left: 1px solid #000;
	border-top: 1px solid #000;
	box-shadow:	2px 0px 2px 0px #000;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

.tab-buttons ul li a img { float:left; }
.tab-buttons ul li a span { float:left; margin: 2px 0 0 5px; text-transform: capitalize; } 
.tab-buttons ul li.current { background-color: var(--fw-bg-color); box-shadow: 0 0 0 0 var(--fw-bg-color);}
.tab-buttons ul li.current a span { color: var(--fw-font-color); font-weight: bold; }
.tab-buttons ul li a { padding: 8px 10px; margin-right: 0px; color: var(--fw-font-color); } 

/* ----------------------------------------------------------------------------------------------------------
Label
---------------------------------------------------------------------------------------------------------- */
.label { font-size: 100%; }

/* ----------------------------------------------------------------------------------------------------------
Fix Jquey UI Date Picker show at bottom on start
---------------------------------------------------------------------------------------------------------- */
#ui-datepicker-div { display: none; }
input.hasDatepicker { height: 30px; font-size: 13px; margin-bottom: 0px; }
input.hasTimeEntry  { height: 30px; font-size: 13px; margin-bottom: 0px; }

/* ----------------------------------------------------------------------------------------------------------
Multi Select
---------------------------------------------------------------------------------------------------------- */
select.multiselect { width: 550px; height: 300px; }
select.multiselect + div { margin-bottom: 10px; }

/* ----------------------------------------------------------------------------------------------------------
Utilities
---------------------------------------------------------------------------------------------------------- */
.ellipsis { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; }
.clickable { cursor: pointer; }


/* ----------------------------------------------------------------------------------------------------------
Stacktrace
---------------------------------------------------------------------------------------------------------- */
pre, code {
  font-family: Monaco, monospace;
  font-size: 12px;
  background: #111;
  color: #F5F5F5;
}

p code {
  padding: 1px 3px;
}

pre {
  padding: 10px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}


/* ----------------------------------------------------------------------------------------------------------
Multifiles Upload
---------------------------------------------------------------------------------------------------------- */

.template-download.fade.in { opacity: 1; }
.template-upload.fade.in { opacity: 1; }