/*
Sections:
    •	forms.css
	•	tables.css
	•	buttons.css
	•	portlet.css
	•	icons.css
 */

/* =========================================================
   1. GLOBAL ELEMENT RESET
   ========================================================= */

div,
input,
select,
textarea,
span,
img,
table,
label,
td,
th,
p,
a,
button,
ul,
code,
pre,
li {
    /*-webkit-border-radius: 0 !important;*/
    /*-moz-border-radius: 0 !important;*/
    /*border-radius: 0 !important;*/
}


/* =========================================================
   2. BODY / GLOBAL BASE STYLES
   ========================================================= */

body {
    color: #333333;
    font-family: "Open Sans", sans-serif;
    padding: 0px !important;
    margin: 0px !important;
    font-size: 13px;
    direction: ltr;
}

main{
    margin: 60px;
}


/* =========================================================
   3. LOGIN PAGE
   ========================================================= */

.login .logo img{
    display: inline;
}

.login .checkbox {
    padding-left: 20px!important;
}


/* =========================================================
   4. FORM INPUTS
   ========================================================= */

.input-xsmall {
    width: 80px !important;
}

.input-inline {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-control {
    font-size: 14px;
    font-weight: normal;
    color: #333;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: none;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}


/* =========================================================
   5. FORM INPUT ICONS
   ========================================================= */

.input-icon {
    position: relative;
}

.input-icon > .form-control {
    padding-left: 33px;
}

.input-group .input-icon > .form-control {
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    -ms-border-radius: 4px 0 0 4px;
    -o-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.input-icon > i {
    color: #ccc;
    display: block;
    position: absolute;
    margin: 11px 2px 4px 10px;
    z-index: 3;
    width: 16px;
    font-size: 16px;
    text-align: center;
}

.modal .input-icon > i {
    z-index: 10055;
}

.input-icon.right > .form-control {
    padding-right: 33px;
    padding-left: 12px;
}

.input-group .input-icon.right > .form-control {
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    -ms-border-radius: 0 4px 4px 0;
    -o-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}

.input-icon.right > i {
    right: 8px;
    float: right;
}

.input-icon.input-icon-lg > i {
    margin-top: 16px;
}

.input-icon.input-icon-sm > i {
    margin-top: 8px;
    font-size: 13px;
}


/* =========================================================
   6. FORM STATES
   ========================================================= */

.has-success .input-icon > i {
    color: #45B6AF;
}

.has-warning .input-icon > i {
    color: #dfba49;
}

.has-info .input-icon > i {
    color: #89C4F4;
}

.has-error .input-icon > i {
    color: #F3565D;
}


/* =========================================================
   7. MATERIAL DESIGN INPUT STYLES
   ========================================================= */

.form-group.form-md-line-input.form-md-floating-label .input-icon > label {
    padding-left: 34px;
}

.form-group.form-md-line-input.form-md-floating-label .input-icon.right > label {
    padding-left: 0;
    padding-right: 34px;
}

.form-group.form-md-line-input + .input-icon {
    padding-top: 0;
}

.form-group.form-md-line-input > .input-icon > i {
    left: 0;
    bottom: 0;
    margin: 9px 2px 10px 10px;
    color: #888888;
}

.form-group.form-md-line-input > .input-icon.input-icon-lg > i {
    top: 6px;
}

.form-group.form-md-line-input > .input-icon.input-icon-sm > i {
    top: -1px;
}

.form-group.form-md-line-input > .input-icon .form-control {
    padding-left: 34px;
}

.form-group.form-md-line-input > .input-icon > label {
    margin-top: -20px;
}

.form-group.form-md-line-input > .input-icon.right .form-control {
    padding-left: 0;
    padding-right: 34px;
}

.form-group.form-md-line-input > .input-icon.right > i {
    left: auto;
    right: 8px;
    margin: 11px 2px 10px 10px;
}

.form-inline .form-md-line-input > .input-icon {
    padding: 0;
}

.form-horizontal .form-group.form-md-line-input .input-icon .form-control {
    padding-left: 33px;
}

.form-horizontal .form-group.form-md-line-input .input-icon > i {
    top: 0;
}

.form-horizontal .form-group.form-md-line-input .input-icon.right .form-control {
    padding-left: 0;
    padding-right: 33px;
}

.form-horizontal .form-group.form-md-line-input .input-icon > .form-control-focus {
    left: 0 !important;
    right: 0 !important;
}


/* =========================================================
   8. PORTLET COMPONENT
   ========================================================= */

.portlet {
    margin-top: 0px;
    margin-bottom: 25px;
    padding: 0px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

.portlet.box {
    padding: 0px !important;
}

.portlet.box.red {
    border: 1px solid #d78184;
    border-top: 0;
}

.portlet > .portlet-title {
    border-bottom: 1px solid #eee;
    padding: 0;
    margin-bottom: 10px;
    min-height: 41px;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

.portlet.box > .portlet-title {
    border-bottom: 0;
    padding: 0 10px;
    margin-bottom: 0;
    color: #fff;
}

.portlet.box.red > .portlet-title {
    background-color: #cb5a5e;
}

.portlet.box.red > .portlet-title > .caption {
    color: #FFFFFF;
}

.portlet > .portlet-title > .caption {
    float: left;
    display: inline-block;
    font-size: 18px;
    line-height: 18px;
    padding: 10px 0;
}

.portlet.box > .portlet-title > .caption {
    padding: 11px 0 9px 0;
}

.portlet > .portlet-title > .caption > i {
    float: left;
    margin-top: 4px;
    display: inline-block;
    font-size: 20px;
    margin-right: 5px;
    color: white;
}

.portlet > .portlet-body {
    clear: both;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.portlet.box > .portlet-body {
    background-color: #fff;
    padding: 10px;
}

.portlet > .portlet-body.red,
.portlet.red {
    background-color: #cb5a5e;
}

.portlet > .portlet-body.djr-style,
.portlet.djr-style {
    background-color: #7b7d68 ;
    border: 1px #7b7d68 solid;
    color:#222;
}

.portlet > .portlet-body.grey-cascade,
.portlet.grey-cascade {
    background-color: #95A5A6;
    border: 1px #95A5A6 solid;
}

.portlet > .portlet-title:before,
.portlet > .portlet-title:after {
    content: " ";
    display: table;
}

.portlet > .portlet-title:after {
    clear: both;
}


/* =========================================================
   9. LABELS / BADGES
   ========================================================= */

.label {
    text-shadow: none !important;
    font-size: 13px;
    font-weight: 300;
    padding: 3px 6px 3px 6px;
    color: #fff;
    font-family: "Open Sans", sans-serif;
}

.label.label-sm {
    font-size: 12px;
    padding: 0px 4px 1px 4px;
}

.label-success {
    background-color: #45B6AF;
}


/* =========================================================
   10. TABLE COMPONENT
   ========================================================= */

.table-scrollable {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dddddd;
    margin: 10px 0 !important;
}

.table-scrollable > .table {
    width: 100% !important;
    margin: 0 !important;
    margin-bottom: 0;
    background-color: #fff;
}

.table-scrollable > .table > thead > tr > th,
.table-scrollable > .table > tbody > tr > th,
.table-scrollable > .table > tfoot > tr > th,
.table-scrollable > .table > tfoot > tr > td {
    white-space: nowrap;
}

.table thead tr th {
    font-size: 14px;
    font-weight: 600;
}

.dt-paging li {
    padding: 0!important;
}


/* =========================================================
   11. BUTTON STYLES
   ========================================================= */

.blue.btn {
    background-color: rgba(182, 140, 75, 1)!important;
    color: #222!important;
    float: unset!important;
    width: 100%;
    border:1px solid rgba(255, 255, 255, 50%)!important
}

.blue.btn:hover,
.blue.btn:focus,
.blue.btn:active,
.blue.btn.active {
    color: #FFFFFF!important;
    background-color: rgba(182, 140, 75, 0.4)!important;
}

.blue.btn:active,
.blue.btn.active {
    background-image: none;
    background-color: #1f78b5;
}

.blue.btn:active:hover,
.blue.btn.active:hover {
    background-color: #217ebd;
}

.blue.btn.disabled,
.blue.btn.disabled:hover,
.blue.btn.disabled:focus,
.blue.btn.disabled:active,
.blue.btn.disabled.active,
.blue.btn[disabled],
.blue.btn[disabled]:hover,
.blue.btn[disabled]:focus,
.blue.btn[disabled]:active,
.blue.btn[disabled].active,
fieldset[disabled] .blue.btn,
fieldset[disabled] .blue.btn:hover,
fieldset[disabled] .blue.btn:focus,
fieldset[disabled] .blue.btn:active,
fieldset[disabled] .blue.btn.active {
    background-color: #3598dc;
}

.blue.btn .badge {
    color: #3598dc;
    background-color: #FFFFFF;
}


/* =========================================================
   12. ICON SYSTEM
   ========================================================= */

[class^="fa-"]:not(.fa-stack),
[class^="glyphicon-"],
[class^="icon-"],
[class*=" fa-"]:not(.fa-stack),
[class*=" glyphicon-"],
[class*=" icon-"] {
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    -webkit-font-smoothing: antialiased;
}


/* =========================================================
   13. METRO ICONS
   ========================================================= */

[class^="m-icon-"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    line-height: 14px;
    vertical-align: top;
    background-image: url(../img/syncfusion-icons.png);
    background-repeat: no-repeat;
}

[class^="m-icon-big-"] {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 6px;
    vertical-align: middle;
    background-image: url(../img/syncfusion-icons.png);
    background-position: 0 0px;
    background-repeat: no-repeat;
}

.btn.m-icon-big [class^="m-icon-big-"] {
    margin: 0 0 0 10px;
}

.btn.m-icon [class^="m-icon-"] {
    margin: 4px 0 0 5px;
}


/* =========================================================
   14. MISC HELPERS
   ========================================================= */

.row_outline{
    border: 1px solid black;
}

.m-icon-swapright {
    background-position: -27px -10px;
}