/*********************  FONTS *********************/

/*** Roboto & Roboto Condensed ***/
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto/Roboto-Thin-webfont.woff') format('woff'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto/Roboto-Light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto/Roboto-Regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto/Roboto-Medium-webfont.woff') format('woff'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Roboto'; src: url('../fonts/roboto/Roboto-Bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Roboto Condensed'; src: url('../fonts/roboto/RobotoCondensed-Light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Roboto Condensed'; src: url('../fonts/roboto/RobotoCondensed-Regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Roboto Condensed'; src: url('../fonts/roboto/RobotoCondensed-Bold-webfont.woff') format('woff'); font-weight: 700; font-style: normal; }

/*********************  GENERAL RESET & SETUP  *********************/

/*** Body settings ***/
html, body { width: 100%; height: 100%; background: #d8dce3; }
body { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 20px; color: #404040; direction: ltr; }

/*** overides metro scrolbars in IE10 and makes them look like a default scrollbar  ***/
@-ms-viewport { width: auto !important; }

/*** Typography  ***/
h3 small, h4 small, h5 small { color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: 300; }
h1.block, h2.block, h3.block, h4.block, h5.block, h6.block { padding-bottom: 10px; }

/*** Link  ***/
a { text-shadow: none !important; color: #0d638f; }
a[href]:focus { outline: 0; text-decoration: none; }
a:focus { outline: none !important; }
a:hover, a:active { outline: 0 !important; }
select:focus { outline: none !important; }
* { outline: none !important; }
.link-blue { text-decoration: underline; color: #0d638f !important; }
.link-blue:hover { text-decoration: none; color: #194572 !important; }

/*** UI Elements ***/
ul, ol { margin: 0; }
li { list-style: none; }

input, input[type="text"], input[type="password"], button, input[type="submit"], label, select, textarea { font-family: 'Roboto Condensed', sans-serif; }
button, .button, input[type="submit"] { cursor: pointer; }
label { height: 24px; line-height: 23px; margin: 0; font-size: 11px; color: #404040; }
label, label b { display: inline-block; }
::-webkit-input-placeholder { color:#898989; }
::-moz-placeholder { color:#606060; }
:-ms-input-placeholder { color:#898989; }
input:-moz-placeholder { color:#606060; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #ebebeb inset; -webkit-text-fill-color: #14375b!important; background: transparent!important;}
input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, select, textarea { padding: 2px 5px; margin: 0; font-size: 11px; color:#696969; }
input[type="radio"], input[type="checkbox"] { margin: 0; cursor: pointer; }
.radio input[type="radio"], .checkbox input[type="checkbox"] { margin-left: 0; }
#tree input[type="checkbox"] { margin: -2px 0 0 3px; }
select { width: auto; height: 26px; padding: 2px 0; }
.multiSelect, a.multiSelect { height: 24px; border: solid 1px #ccc; color: #696969; cursor: pointer; background: #fff url("../images/multiSelect-treeDown.png") right 9px no-repeat; }
.multiSelect.active, a.multiSelect.active { background: #fff url("../images/multiSelect-treeUp.png") right 9px no-repeat; }
.close { display: inline-block; margin-top: 0; margin-right: 0; width: 9px; height: 9px; background-repeat: no-repeat !important; background-image: url("../images/remove-icon-small.png") !important; }
.alert .close { right: 0; }
hr { margin: 20px 0; border: 0; border-top: 1px solid #E0DFDF; border-bottom: 1px solid #FEFEFE; }

/*** Font awesome icons. ***/
[class^="icon-"],
[class*=" icon-"],
[class^="icon-"]:hover,
[class*=" icon-"]:hover { background: none !important; }

/*** Make font awesome icons ***/
li [class^="icon-"],
li [class*=" icon-"] { display: inline-block; width: 1.25em; text-align: center; }
li [class^="icon-"].icon-large,
li [class*=" icon-"].icon-large { /* increased font size for icon-large */ width: 1.5625em; }

/*** ie8 & ie9 modes ***/
.visible-ie8 { display: none; }
.ie8 .visible-ie8 { display: inherit !important; }
.visible-ie9 { display: none; }
.ie9 .visible-ie9 { display: inherit !important; }
.hidden-ie8 { display: inherit; }
.ie8 .hidden-ie8 { display: none !important; }
.hidden-ie9 { display: inherit; }
.ie9 .hidden-ie9 { display: none !important; }

/*** Fix link outlines after click ***/
a, a:focus, a:hover, a:active { outline: 0; }

/*** IE8 fix for form input height in fluid rows ***/
.ie8 .row-fluid [class*="span"] { min-height: 20px !important; }

/*** Fix grid offset used for reponsive layout handling(refer app.js=>handleResponsive) ***/
.fix-offset { margin-left: 0 !important; }

/*** Floating & Alignment ***/
.fl { float: left !important; } .fr { float: right !important; } .ac,.alignCenter { text-align: center !important; } .al,.alignLeft { text-align: left !important; } .ar,.alignRight { text-align: right !important; } 
.textup { text-transform: uppercase!important; } 

/*** Margin & Padding ***/
.mt5 { margin-top: 5px!important; } .mb5 { margin-bottom: 5px!important; } .ml5 { margin-left: 5px!important; } .mr5 { margin-right: 5px!important; } .m5 { margin: 5px!important; }
.mt10 { margin-top: 10px!important; } .mb10 { margin-bottom: 10px!important; } .ml10 { margin-left: 10px!important; } .mr10 { margin-right: 10px!important; } .m10 { margin: 10px!important; }
.mt15 { margin-top: 15px!important; } .mb15 { margin-bottom: 15px!important; } .ml15 { margin-left: 15px!important; } .mr15 { margin-right: 15px!important; } .m15 { margin: 15px!important; }
.mt20 { margin-top: 20px!important; } .mb20 { margin-bottom: 20px!important; } .ml20 { margin-left: 20px!important; } .mr20 { margin-right: 20px!important; } .m20 { margin: 20px!important; }
.mt25 { margin-top: 25px!important; } .pr20 { padding-right: 20px !important; }
.mt0 { margin-top: 0!important; } .mb0 { margin-bottom: 0!important; } .ml0 { margin-left: 0!important; } .mr0 { margin-right: 0!important; } .m0 { margin: 0!important; }
.pt5 { padding-top: 5px !important; } .pb5 { padding-bottom: 5px !important; } .pl5 { padding-left: 5px !important; } .pr5 { padding-right: 5px !important; } .p5 { padding: 5px!important; }
.pt10 { padding-top: 10px !important; } .pb10 { padding-bottom: 10px !important; } .pl10 { padding-left: 10px !important; } .pr10 { padding-right: 10px !important; } .p10 { padding: 10px!important; }
@media (max-width: 1360px) {
    .mm0 { margin: 0!important; }
}

/*** Misc tools ***/
.width100 { width: 100%; }
.w100 { width: 100px; }
.w200 { width: 200px; }
.no-padding,.no-p { padding: 0 !important; }
.no-margin,.no-m { margin: 0 !important; }
.no-border,.no-b { border: none !important; }
.no-vertical-align { vertical-align: middle; }
.no-bottom-space { padding-bottom: 0 !important; margin-bottom: 0px !important; }
.no-top-space { padding-top: 0 !important; margin-top: 0 !important; }
.space5 { display: block; height: 5px !important; clear: both; }
.space7 { height: 7px !important; clear: both; }
.space10 { height: 10px !important; clear: both; }
.space12 { height: 12px !important; clear: both; }
.space15 { height: 15px !important; clear: both; }
.space20 { height: 20px !important; clear: both; }
.no-space { margin: 0px !important; padding: 0 !important; }
.no-text-shadow { text-shadow: none !important; }
.no-shadow { box-shadow: none !important; }
.no-left-padding { padding-left: 0 !important; }
.no-left-margin { margin-left: 0 !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-top-10 { margin-top: 10px !important; }
.margin-bottom-15 { margin-bottom: 15px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-bottom-25 { margin-bottom: 25px !important; }
.hide { display: none; }
.bold,b { font-weight: bold !important; color: #404040}
.fix-margin { margin-left: 0 !important; }
.border { border: 1px solid #ddd; }
.borderto { border: 1px solid #ddd; padding-top: 5px }
.bordered { border-bottom: 1px solid #ddd; padding-bottom: 5px }
.border.green { border-color: #5cb85c; }
.border.red { border-color: #d9534f; }
.border.blue { border-color: #337ab7; }
.borderno { border: none!important; }
.inline { display: inline; }
.w50 { width: 50%; float: left; }
.w30px { width: 30px; }
.h20 { height: 20px; }
.center-span { display: inline-block; text-align: center; }
div.checker { margin-right: 2px; }
.db { display: block; }
.dib { display: inline-block; }
.clear { clear: both; }
.clears { margin: 0!important; padding: 0!important; border: none!important; }
.warning { color: orange; border: 1px orange solid !important; }
.error, .error-odd { color: #d9534f; border: 1px #d9534f solid !important; }
input.error, input.error-competitor { color: #d9534f; }
input.error-competitor, .error-key { border: 1px #d9534f solid !important; }

/* Text Decoration */
.bto-asb-ac { text-align: center !important; }
.bto-asb-al { text-align: left !important; }
.bto-asb-ar { text-align: right !important; }
.bto-asb-low_case { text-transform: lowercase !important; }
.bto-asb-up_case { text-transform: uppercase !important; }
.bto-asb-underline { text-decoration: underline }

/*** Styles for basic forms ***/
.logo-image { float: left; text-align: center; }
img.goal-info, img.card-info, img.corner-info { cursor: pointer; }
img.no-cards, img.no-goals, img.no-corners { opacity: 0.4; }


/*** Styles for basic forms ***/
fieldset { border: 1px solid #ddd; padding: 10px; }
legend { font-size: 1.2em; font-weight: bold; }
textarea { min-height: 75px; }
.editor-label { margin: 1em 0 0 0; }
.editor-field { margin: 0.5em 0 0 0; }
.no-border { border: none; }

/*** Styles for validation helpers ***/
.field-validation-error { color: #f82626!important; }
.field-validation-valid { display: none; }
.input-validation-error { border: 1px solid #f82626!important; background-color: #ffeeee!important; }
.validation-summary-errors { font-weight: bold; color: #f82626!important; }
.validation-summary-valid { display: none; }
.editor-field input[type="text"], .editor-field input[type="password"], .editor-field textarea { width: 96%; }
.editor-wrapper, .editor-small-wrapper { float: left; }
.editor-small-wrapper { margin-right: 10px; width: 40%; }

/*** Styles for jqGrid helpers ***/
.action_buttons, .grid_wrapper { float: left; padding-top: 20px; }
.action_buttons { padding-left: 50px; }

/*** Styles for popup ***/
.sports_selection_wrapper, .sports_selection_elements { float: left; padding-left: 20px; }
.sports_selection_wrapper { padding-left: 0; }
.sports_selection_elements { width: 120px; padding: 5px; margin: 2px; border: 1px solid #ddd; }
.sports_selection_elements span { padding-left: 6px; }

/*** jQuery Spinner Styles ***/
.ui-spinner { width: 100%; display: block; position: relative; overflow: hidden; border: 1px solid #ccc; background: #fff repeat-x left bottom; padding: 0 5px; }
.ui-spinner-disabled { background: #F4F4F4; color: #CCC; }
.ui-spinner-box { width: 90%; height: 100%; float: left; border: none; background: none; padding: 0; }
.ui-spinner-up,.ui-spinner-down { background: none !important; color: #3384B9 !important; width: 8px; height: 12px !important; font-size: 0.5em !important; padding: 0 12px 0 0; margin: 0; z-index: 100; text-align: center; vertical-align: middle; position: absolute; right: 0; cursor: default; border: 1px solid #ccc !important; border-right: none !important; border-top: none !important; }
.ui-spinner-up { padding-bottom: 2px; }
.ui-spinner-down { bottom: 1px; border-bottom: 0 !important; }
.ui-spinner-up:hover,
.ui-spinner-down:hover { background: #ccc !important; }
.ui-spinner-pressed { background: #FEFEFE; }
.ui-spinner-list,
.ui-spinner-listitem { margin: 0; padding: 0; line-height: 1.6em !important; list-style: none; }
.alert-wrapper { border: 2px #A4B2BB solid; padding: 10px; margin: 10px; }
.alert-header { text-align: left; float: left; min-width: 130px; text-align: right; padding-right: 10px; }

/*** Login Page Styles ***/
.loginbody { background: url(/Areas/Admin/Content/images/cover.jpg); background-color: #f1f4f5; background-attachment: fixed; background-repeat: no-repeat; background-position: 50% 50%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 0; }
.loginbody #container { min-width: inherit; padding-top: 9%; }
.login-page .login-wrap { width: 320px; margin: 0 auto ; padding: 40px 40px 20px; background: #14375b; box-shadow: 0 13px 24px 0 rgba(0, 0, 0, 0.24); }
.login-page .logo { display: block; padding: 0; margin: 0 auto 40px auto; text-align: center; }
.login-page .logo img { width: 200px; height: 40px; }
.login-page h2 { font-size: 18px; font-weight: 300; color: #ebebeb; text-align: center; margin: 0 auto 40px auto; }
.login-page input { outline: none; }
.login-page input[type="text"],.login-page input[type="password"] { width: 100%; padding: 0; border:0; font-size: 13px; color: #14375b; background: transparent; }
.login-page input[type="text"]:focus, .login-page input[type="password"]:focus { box-shadow: 0 0 0px 1000px #ebebeb inset; -webkit-box-shadow: 0 0 0px 1000px #ebebeb inset;  border-color: transparent; }
.login-page .loginUsername, .login-page .loginPassword { margin-bottom: 10px; padding: 11px 5px 11px 34px; border: 1px solid #113050; background: #ebebeb url(/Areas/Admin/Content/images/login-icon.png) 0 0 no-repeat; background-size: 20px; }
.login-page .loginUsername { background-position: 8px 10px; }
.login-page .loginPassword { background-position: 4px -41px; background-size: 28px; }
.login-page .input-validation-error { border: none!important; }
.login-page button { display: block; width: 100%; padding: 10px 0; margin-top: 30px; border: none; font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 400; color: #fff; text-transform: uppercase; background-color: #00ae4d; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }
.login-page button:hover { background-color: #019944; }
.login-page .version { margin-top: 30px; text-align: center; color: #708091; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 300; }
.validation { width: 400px; margin: 10px auto; }
.validation .alert span { font-family: "Roboto", sans-serif; font-size: 12px; font-weight: 400;}
.alert { padding: 15px; border: 1px solid transparent; border-radius: 0; }
.alert-danger { color: #d9534f!important; background-color: #f2dede; border-color: #ebccd1; text-align: center; }
.validation .field-validation-error { display: block; }
.validation .validation-summary-errors span { display: block; padding-bottom: 5px; color: #d9534f!important; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: bold; }
.validation .validation-summary-errors ul { margin: 0; padding: 0; }
.validation .validation-summary-errors ul li { list-style: none; color: #d9534f!important; font-family: 'Roboto', sans-serif; font-size: 12px!important; font-weight: 400; }
.loading-animation { width: auto; height: 14px; margin: 0 auto; font-size: 6px; margin: -2.5em auto 24px; position: relative; text-indent: -9999em; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
.loading-animation:before, .loading-animation:after, .loading-animation { border-radius: 50% !important; width: 2.5em; height: 2.5em; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: load1 1.8s infinite ease-in-out; animation: load1 1.8s infinite ease-in-out; }
.loading-animation:before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.loading-animation:after { left: 3.5em; }
.loading-animation:before, .loading-animation:after { content: ''; position: absolute; top: 0; }

/*** Goal Styles ***/
.goal-template, .card-template, .corner-template { display: none; }
.goal-value, .card-value, .corner-value, .time-value { width: 25px; }
#goals, #cards, #corners { max-height: 400px; min-height: 200px; overflow-y: scroll; }

/*** Match Styles ***/
.statistics { float: left; }
.editor-wrapper.match-options { display: block; overflow: hidden; cursor: pointer; }
.statistics-header-label { padding: 5px; }

/*** Favorite Teams Styles ***/
#tournamentMatches table.favorite-teams tr th { text-align: center; }
#tournamentMatches table.favorite-teams tr td { color: gray; vertical-align: middle; text-align: center; }
#tournamentMatches table.favorite-teams tr td.teams { min-width: 200px; }
#tournamentMatches table.favorite-teams tr td.title { min-width: 80px; text-align: center; padding-top: 15px; }
#tournamentMatches table.favorite-teams tr td.favorite-teams { min-width: 60px; text-align: center; padding-top: 25px; }
#tournamentMatches table.favorite-teams tr td.favorite-odds,
#tournamentMatches table.favorite-teams tr td.favorite-medium { min-width: 60px; }
input[class^="other-odd"],
input.fav-odd { width: 50px; margin-bottom: 3px; }
input.home-favorite { margin-bottom: 3px; }
#tournamentMatches a.match-title { color: #444444; font-weight: bold; font-size: 10px; }
.home-favorite { margin-top: 10px; }
input[readonly] { background-color: #B0C4DE !important; border: 1px solid gray; }
.bulk-edit-header { float: left; }

/*** Fixture Groups Styles ***/
.fixture-group { font-size: 11px !important; font-weight: normal; text-decoration: none; }

/*** Animation ***/
.fadeIn {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; }
.fadeInDown { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }

@-webkit-keyframes fadeInDown { 
    0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown {
    0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
    100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; } 
}
@-webkit-keyframes fadeIn {
     0% { opacity: 0; }
     100% { opacity: 1; } 
}

@-webkit-keyframes load1 {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em #27ae60; }
    40% { box-shadow: 0 2.5em 0 0 #27ae60; }
}
@keyframes load1 {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em #27ae60; }
    40% { box-shadow: 0 2.5em 0 0 #27ae60; }
}

.dataTable a.btn {
    text-transform: uppercase;
    font-weight: bold;
    min-width: 60px;
}

.crop {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
}

.fa-badge[data-count]:after { position: relative; right: 20%; top: 1%; content: attr(data-count); font-size: 75%; color: white; padding: .6em; 
    border-radius: 999px; line-height: .75em; background: rgba(251, 99, 95, 0.85); text-align: center; min-width: 1em; }

.fa-badge-green[data-count]:after { position: relative; right: 20%; top: 1%; content: attr(data-count); font-size: 75%; color: white; padding: .6em; 
    border-radius: 999px; line-height: .75em; background: rgba(92, 184, 92, 0.85); text-align: center; min-width: 1em; }