html {
    min-height: 100%;
    font-size: 62.5%;
    font-family: 'Open Sans', Verdana, sans-serif;
}

body {
    min-height: 100%;
    margin: 0px 0px;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

button {
    box-sizing: border-box;
    padding: .7rem 1rem;
    border-radius: .3rem;
    border: 1px solid #317EEB;
    background-color: #317EEB;
    font-size: 1.5rem;
    font-family: 'Open Sans';
    color: #FFFFFF;
}

button:hover {
    cursor: pointer;
    background-color: #1760C7;
}

input[type="text"],
input[type="number"],
input[type="password"],
select,
textarea {
    box-sizing: border-box;
    padding: .7rem 1rem;
    border-radius: .3rem;
    border: 1px solid #B9B9B9;
    font-size: 1.4rem;
}

.form-row {
    margin-bottom: 1.5rem;
}

#dashboard  {
    background-color: #F7F7F7;
}

.w10 {
    width: 10%;
}

.w20 {
    width: 20%;
}

.w30 {
    width: 30%;
}

.w40 {
    width: 40%;
}

.w50 {
    width: 50%;
}

.w60 {
    width: 60%;
}

.w70 {
    width: 70%;
}

.w80 {
    width: 90%;
}

.w90 {
    width: 90%;
}

.w100 {
    width: 90%;
}

.inf {
    color: #459536;
}

.warn {
    color: #D60030;
}

.warn-field {
    border-color: #D60030 !important;
}

.scrollable {
    overflow: hidden;
}

.list-success,
.list-errors {
    font-size: 1.4rem;
}


/* Dashboard header
---------------------------------- */
#dashboard header {
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    height: 7rem;
    background-color: #317EEB;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
}

#company-name {
    margin-left: 3rem;
    font-size: 2.4rem;
}

#navbar-right {
    margin-right:3rem;
}

#navbar-right  a:link {
    margin-left: 2.5rem;
    text-decoration: none;
    font-size: 1.4rem;
    color: #FFFFFF;
}
#navbar-right  a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
#navbar-right  a:hover {
    text-decoration: underline;
}
#navbar-right a:active {
    text-decoration: underline;
}

/* Dashboard left sidebar
---------------------------------- */
#nav-lft {
    box-sizing: border-box;
    width: 17%;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#nav-lft ul {
    overflow: hidden;
}

#menu {
    margin: 5rem 2rem;
    font-size: 1.5rem;
}

#menu a:link,
#menu .submenu-toggle {
    text-decoration: none;
    font-size: 1.4rem;
    color: #003154;
}

#menu a:visited {
    text-decoration: none;
    color: #003154;
}

#menu a:hover {
    text-decoration: none;
}

#menu a:active {
    text-decoration: none;
}

#menu .lev-1 {
    margin-left: 1em;
}
#menu .lev-2 {
    margin-left: 2em;
}

#menu .lev-3 {
    margin-left: 3em;
}


#menu li,
.menu-item {
    padding: .3em 0;
}

#menu .submenu {
    box-sizing: border-box;
    margin-left: 2rem;
    max-height: 0;
}

#menu .submenu-toggle:hover {
    cursor: pointer;
}

.menu-item {
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #FFFFFF;
}

.menu-item > .active {
    font-weight: bold;
}
/* Dashboard body
---------------------------------- */

#dashboard-body {
    display: flex;
    flex-flow: row wrap;
    min-height: calc(100vh - 70px);
}

#dashboard-content {
    box-sizing: border-box;
    width: 77%;
    margin: 5rem auto;
}

#dashboard-content section {
    display: flex;
    flex-flow: row wrap;
}

/* Dashboard panels
---------------------------------- */
.panels-wrapper {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin-bottom: 3rem;
}

.panel {
    margin: 1rem;
    border: 1px solid #DDDDDD;
    border-radius: .3rem;
    box-shadow: 2px 3px 6px -3px #DDDDDD;
    background-color: #FFFFFF;
}

.panel-hd {
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 1rem;
    border-bottom: 1px solid #DDDDDD;
    background: linear-gradient(#FFFFFF, #F7F7F7);
}

.panel-title {
    font-size: 1.5rem;
}

.panel-body {
    padding: 1rem;
    font-size: 1.4rem;
}

.panel-body h1 {
    font-size: 1.8rem;
    font-weight: 400;
}


/* Table
---------------------------------- */
.flextable {
    width: 100%;
}

.flextable > .row {
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 96%;
    margin: 0 auto;
    padding: 1.5rem 0 .5rem 0;
    font-size: 1.4rem;
    border-bottom: 1px solid #cccccc;
}

.flextable td {
    padding: 1.5rem 0 .5rem 0;
    border-bottom: 1px solid #cccccc;
}

.flextable > .row > div {
    margin: 0 2rem;
    flex: 1 1 0;
}

.flextable i {
    margin: 0 .7rem;
    font-size: 2rem;
    color: #DDDDDD;
}

.flextable i:hover {
    cursor: pointer;
}


/* Table
---------------------------------- */
#dimm {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #DDDDDD;
    opacity: 0.3;
    z-index: 100;
}

#popwin {
    position: absolute;
    width: 80%;
    max-width: 100rem;
    margin: 0 auto;
    right: 0;
    left: 0;
    background-color: #FFFFFF;
    border: 1px solid #CECECE;
    z-index: 120;
    box-shadow: 3px 3px 7px rgba(50, 50, 50, .3);
}

#popwin-close {
    position: absolute;
    top: .7rem;
    right: .7rem;
    font-size: 1.8rem;
    color: #777777;
}

#popwin-close:hover {
    color: #000000;
    cursor: pointer;
}

/* Profile
---------------------------------- */

#update-profile,
#change-pwd {
    float: left;
    overflow: auto;
    margin-top: 3rem;
    margin-right: 20rem;
    margin-bottom: 3rem;
}

#update-profile input[type="text"],
#change-pwd input[type="password"],
#update-profile select {
    width: 20rem;
}


/** margins paddings **/
.ml-5 {
    margin-left: 5px;
}
.ml-10 {
    margin-left: 10px;
}
.ml-15 {
    margin-left: 15px;
}
.ml-20 {
    margin-left: 20px;
}
.mt-5 {
    margin-top: 5px;
}
.mt-10 {
    margin-top: 10px;
}
.mt-15 {
    margin-top: 15px;
}
.mt-20 {
    margin-top: 20px;
}
.mb-5 {
    margin-bottom: 5px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-15 {
    margin-bottom: 15px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mr-5 {
    margin-right: 5px;
}
.mr-10 {
    margin-right: 10px;
}
.mr-15 {
    margin-right: 15px;
}
.mr-20 {
    margin-right: 20px;
}



.pl-5 {
    padding-left: 5px;
}
.pl-10 {
    padding-left: 10px;
}
.pl-15 {
    padding-left: 15px;
}
.pl-20 {
    padding-left: 20px;
}
.pt-5 {
    padding-top: 5px;
}
.pt-10 {
    padding-top: 10px;
}
.pt-15 {
    padding-top: 15px;
}
.pt-20 {
    padding-top: 20px;
}
.pb-5 {
    padding-bottom: 5px;
}
.pb-10 {
    padding-bottom: 10px;
}
.pb-15 {
    padding-bottom: 15px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pr-5 {
    padding-right: 5px;
}
.pr-10 {
    padding-right: 10px;
}
.pr-15 {
    padding-right: 15px;
}
.pr-20 {
    padding-right: 20px;
}

.pull-left {
    float:left;
}
.pull-right {
    float: right;
}
div.panel-heading {
    cursor: pointer;
}
div.panel-heading[data-toggle="collapse"] > div >a > .fa:before {
    content: "\f068";
}
div.panel-heading.collapsed[data-toggle="collapse"] > div >a >  .fa:before {
    content: "\f067";
}
.panel-heading .toggle {
    float: right;
    margin: 0 10px 0 10px;
}
.form-group > .toggle {
    margin: 0 auto;
    display: block;
}
span.toggle-handle {
    padding:1px 10px;
}
body.dashboard {
    padding-top: 70px;
}


.stats .badge {
    width: 60px;
    height:60px;
    border-radius: 60px;
    line-height: 60px;
    float: left;
    margin-right: 10px;
}
.stats .badge > i {
    font-size: 20px;
}

.stats .badge.posts {
    background-color: #384FAE;
}
.stats .badge.followers {
background-color: #0093EF;
}
.stats .badge.following {
    background-color: #00C0A8;
}
.stats .numbers > p:not(.small) {
    margin: 0;
}
.stats .numbers > p:not(.small) > span {
    font-size: 25px;
}

.followers_charts {
    height: 200px;
    width: 100%;
}

.select2-selection.select2-selection--multiple .select2-search.select2-search--inline .select2-search__field:not([placeholder='']) {
    width: 100% !important;
    margin-right: 100px;
}