:root {

--white: #FFFFFF;
--grey01: #f9f9f9;
--grey015: #f5f5f5;
--grey02: #E3E3E3;
--grey025: #EEEEEE;
--grey03: #DBDBDB;
--grey04: #D0D0D0;
--grey05: #bbbbbb;
--grey06: #acacac;
--grey07: #999999;
--grey08: #858585;
--grey09: #777777;
--grey10: #5A5A5A;
--grey11: #404040;
--grey12: #333333;
--grey13: #262626;

--light: #f2f2f2;
--dark: #404040;

--blue-alt: #C60521; /*karmazsin*/ 

--primary: var(--blue-alt);
--secondary: orange;
--link: var(--primary);

--info: #ecf7ff; 
--danger: #ffecee;
--warning: cornsilk;
--succes: #f6ffec;
--red: orangered;

}


/*----------------- title "sandbox" --------------------------*/

.light-login .widget-box.signup-box h4:after{content:"Sandbox";color:orange;font-family: cursive;}
.navbar .navbar-brand span:after{content:"Sandbox";color: orange;font-family: cursive;}

/*----------------- layout --------------------------*/

html {background: var(--white);}
body {background-color: var(--white);color: var(--dark);}

header {color: var(--white);}
.skin-3 {background-color:var(--white);}
.skin-3 .main-content {background-color:var(--white);}
.page-content {background-color:var(--white);}
.main-container:before {background-color:var(--white);}
.footer .footer-inner .footer-content {border-top: 3px double var(--light);}

.login-layout .widget-box .widget-main {background: var(--grey01);}
.light-login .widget-box {border-bottom: unset;}
.light-login .widget-box.signup-box {border: 1px solid var(--primary); box-shadow: unset;}
.light-login {background: none repeat scroll 0 0 var(--white) !important;}
.signup-box .toolbar {background: var(--light);}
.forgot-box .back-to-login-link, .signup-box .back-to-login-link {color: var(--primary);text-shadow: unset;}
.signup-box .toolbar { border-top: 2px solid var(--dark);}
.input-icon>.ace-icon {color: var(--primary);}
.input-icon>input:focus+.ace-icon {color: var(--primary);}

/*----------------- defaults --------------------------*/

.white {color: var(--white) !important;}
.blue {color: var(--primary) !important;}
.red {color:var(--red) !important;}

.bg-success {background-color: var(--succes);}
.alert-success {background-color: var(--succes);  border-color:  var(--grey04);}
.alert-info {background-color: var(--info);border-color: var(--grey04);}
.alert-warning {background-color: var(--warning);  border-color:  var(--grey04);}
.alert-danger {background-color: var(--danger);border-color: var(--grey04);}
span.required {font-size: 8pt;color: var(--primary) !important;}
span.required ~label {color: var(--dark) !important;}

.badge, .label {background-color:var(--grey05);color: var(--white);}
.badge-grey, .badge.badge-grey, .label-grey, .label.label-grey {background-color: var(--grey05);}
.badge-light, .badge.badge-light, .label-light, .label.label-light {background-color: var(--grey02);}
.badge-light, .label-light {color: var(--grey08);}

.profile-activity .thumbicon {background-color: var(--primary);}
.profile-activity {border-bottom: 1px dotted var(--dark);border-left: 1px dotted var(--white);border-right: 1px dotted var(--white);}
.profile-activity:hover {background-color: var(--grey01);border-left: 1px dotted var(--dark);border-right: 1px dotted var(--dark);}

.page-header h1 {color: var(--primary);}
a {color: var(--link);}
a:hover, a:target {color: var(--link);opacity:0.90;}

/*----------------- buttons --------------------------*/

.btn {color: var(--white) !important;text-shadow:unset;}
.btn.btn-white, .btn.btn-white.no-hover:active, .btn.btn-white.no-hover:hover {background-color: var(--grey02) !important;}

.btn-inverse, .btn-inverse.focus, .btn-inverse:focus {background-color: var(--primary) !important;border-color: var(--primary);}

.btn-inverse.focus:hover, .btn-inverse:active:hover, .btn-inverse:focus:active, .btn-inverse:focus:hover, .btn-inverse:hover, .open>.btn-inverse.dropdown-toggle, .open>.btn-inverse.dropdown-toggle.focus, .open>.btn-inverse.dropdown-toggle:active, .open>.btn-inverse.dropdown-toggle:focus, .open>.btn-inverse.dropdown-toggle:hover {background-color: var(--grey07) !important;
border-color: var(--grey07);}

.btn-primary, .btn-primary.focus, .btn-primary:focus {background-color: var(--primary) !important;border-color: var(--primary);}
.btn-primary.no-hover:active, .btn-primary.no-hover:hover {background-color: var(--link) !important;}

.btn-primary:active:hover, .btn-primary:focus:active, .btn-primary:focus:hover, .btn-primary:hover, .open>.btn-primary.dropdown-toggle, .open>.btn-primary.dropdown-toggle.focus, .open>.btn-primary.dropdown-toggle:active, .open>.btn-primary.dropdown-toggle:focus, .open>.btn-primary.dropdown-toggle:hover {background-color: var(--link) !important;
border-color: var(--link);opacity:0.85;}

.btn-white.btn-primary {background-color: var(--white)!important;border-color: var(--grey05);color: var(--link) !important;opacity: 0.95;}

.btn-white.btn-primary.active, .btn-white.btn-primary:active, .btn-white.btn-primary:focus, .btn-white.btn-primary:hover, .open>.btn-white.btn-primary.active.dropdown-toggle, .open>.btn-white.btn-primary.dropdown-toggle {background-color: var(--light)!important;border-color: var(--link);color: var(--link) !important;opacity:0.90;outline: none;}

/*----------------- navbar --------------------------*/

.navbar .navbar-brand {color:var(--white);}
.skin-3 .navbar {background: var(--dark);}
.ace-nav>li.grey>a:focus, .ace-nav>li.grey>a:hover, .ace-nav>li.open.grey>a {background-color: var(--dark);}
.ace-nav>li.open>a, .ace-nav>li>a:focus, .ace-nav>li>a:hover {background-color:  var(--dark);color: var(--white);}
.ace-nav>li>a {background-color:  var(--dark);color: var(--white);}
.ace-nav>li.grey>a {background-color: var(--dark);}
.ace-nav>li>a>.ace-icon {color: var(--white);}

/*----------------- sidebar --------------------------*/

.skin-3 .sidebar {background-color: var(--grey03);border-color: var(--link);}
.skin-3 .nav-list>li.active.highlight>a, .skin-3 .nav-list>li.active>a {background-color: var(--grey015) !important;color: var(--link) !important;}
.skin-3 .nav-list>li.active, .skin-3 .nav-list>li.active+li {border-color: var(--grey05) !important;}
.skin-3 .nav-list>li.open, .skin-3 .nav-list>li:hover {border-color: var(--grey05) !important;}
.skin-3 .nav-list>li {border-color: var(--light);}
.skin-3 .nav-list>li.open:before, .skin-3 .nav-list>li:hover:before {display: block;
background-color: var(--link) !important;}
.skin-3 .nav-list>li.active:before {display: block;background-color: var(--link) !important;}
.skin-3 .nav-list li.active>a:before {border-color: transparent var(--link) transparent transparent;opacity:0.75;}
.skin-3 .nav-list>li.open, .skin-3 .nav-list>li:hover {border-color: var(--grey03)  !important;}
.skin-3 .nav-list>li:hover>a {background-color: var(--white);color: var(--link);}
.skin-3 .nav-list>li>a {background-color: var(--grey02);color: var(--dark);}
.skin-3 .nav-list>li.open+li, .skin-3 .nav-list>li:hover+li {border-top-color: var(--grey03)  !important;}

.skin-3 .sidebar-toggle {background-color: var(--grey04);border-color: var(--light);}
.skin-3 .sidebar-toggle>.ace-icon {background-color: var(--white);border-color: var(--dark);color: var(--dark);}

/*----------------- breadcrumbs, search, tabs, pagination --------------------------*/

.skin-3 .breadcrumbs {background-color: var(--grey02);}
.breadcrumb>li>a {color: var(--link);}
.breadcrumb>li, .breadcrumb>li.active {color: var(--dark);}

.nav-search .nav-search-input:focus, .nav-search .nav-search-input:hover {border-color: var(--primary);opacity:0.85;}
.nav-search .nav-search-input {border: 1px solid  var(--dark);}
.nav-search .nav-search-icon {color: var(--dark) !important;opacity:0.5;}
.nav-search-input:focus ~ .nav-search-icon{color: var(--primary) !important;opacity:0.5;}

.nav-tabs>li>a, .nav-tabs>li>a:focus {border-color: var(--grey05);background-color: var(--grey01);color: var(--grey07);}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {color: var(--dark);border-color: var(--grey05) var(--grey05) transparent;border-top: 2px solid var(--primary);background-color: var(--white);box-shadow: unset;
}
.nav-tabs>li>a:hover {background-color:var(--white);color: var(--primary);opacity:0.85;border-color: var(--grey05);}

.pagination>li.active>a, .pagination>li.active>a:focus, .pagination>li.active>a:hover {
    background-color: var(--primary);border-color: var(--primary);color: var(--white);text-shadow: unset;}
.pager>li>a, .pagination>li>a {border-color: var(--grey03);color: var(--primary);background-color: var(--white);}
.pager>li>a:hover, .pagination>li>a:hover {color: var(--dark);background-color: var(--light);}

/*----------------- table --------------------------*/

table {background-color: var(--white) !important;}
.table-hover>tbody>tr:hover {background-color: var(--grey015);}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, 
.table.table-bordered>thead>tr>th:first-child {border-left-color: var(--dark);}
[class*=widget-color-]>.widget-body .table thead:first-child tr {background: linear-gradient(180deg, var(--grey01), var(--grey02));}
.table-striped>tbody>tr:nth-of-type(odd) {background-color: var(--grey01);}
.table-striped>tbody>tr:nth-of-type(odd):hover {background-color: var(--grey015);}
.table>thead>tr {color: var(--dark);background: linear-gradient(180deg, var(--grey01), var(--grey02));}
tr.bugnote .bugnote-note {background-color: var(--white);color: var(--dark);width: 75%;vertical-align: top;}
tr.spacer {background-color: var(--white)  !important;color: var(--dark);height: 5px;}
td.category, th.category {background-color: var(--light) !important;color: var(--dark);}

/*----------------- forms --------------------------*/

.form-control, select {color: var(--grey08);background-color: var(--white);}
.form-control:focus, select:focus {color: var(--dark);border-color: var(--primary);opacity:0.85;background-color:var(--white);}

input[type=checkbox].ace:checked+.lbl::before, input[type=radio].ace:checked+.lbl::before {color: var(--primary);background-color: var(--light);border-color: var(--grey07);}

input[type=checkbox].ace+.lbl:hover::before, input[type=checkbox].ace:hover+.lbl::before, input[type=radio].ace+.lbl:hover::before, input[type=radio].ace:hover+.lbl::before {border-color: var(--primary);opacity:0.5;}

input[type=url], input[type=search], input[type=tel], input[type=color], 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], textarea {background: var(--white) !important;border-color: var(--grey05) !important;
color: var(--dark);background-color: var(--white) !important;}

input[type=url]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus, input[type=text]:focus, input[type=password]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, input[type=number]:focus, input[type=email]:focus, textarea:focus {color:var(--dark);border-color: var(--primary);opacity:0.85;background-color: var(--white);}

input[type=url]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=color]:hover, input[type=text]:hover, input[type=password]:hover, input[type=datetime]:hover, input[type=datetime-local]:hover, input[type=date]:hover, input[type=month]:hover, input[type=time]:hover, input[type=week]:hover, input[type=number]:hover, input[type=email]:hover, textarea:hover {border-color: var(--grey03);}

input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{-webkit-box-shadow: 0 0 10px 20px white inset !important;}

/*----------------- widget --------------------------*/

.widget-header {background: linear-gradient(180deg, var(--grey01), var(--grey02));color: var(--primary);border-bottom: 1px solid var(--grey05);}
.widget-body {background-color:var(--white);}
.widget-box[class*=widget-color-]>.widget-header {color: var(--white);}

.widget-toolbox {background-color: var(--grey025);}
.widget-toolbox:first-child {border-bottom: 1px solid var(--grey04);}
.widget-toolbox:last-child {border-top: 1px solid var(--grey05);}

.widget-color-blue2>.widget-header {background: var(--primary);border-color: var(--primary);}
.widget-color-blue2 {border-color: var(--primary);}