body {
    /*overflow-y: hidden !important;*/
}

/* =============Flexbox IE Fix============= */
_:-ms-fullscreen, :root [class*='equal width'].ui.grid > :not(.row).column, [class*='equal width'].ui.grid > .row > .column, .ui.grid > [class*='equal width'].row > .column {
    -ms-flex: 1 !important;
    -webkit-flex: 1 !important;
    flex: 1 !important;
    /* IE 10 */
}

/* =============Flexbox IE Fix============= */

/* =============Clearfix============= */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/* =============Clearfix============= */

/* =============Some Css Settings============ */
xmp {
    background: rgba(255, 224, 102, 0.50);
    padding: 0 5px;
}

.article {
    background: #3f9643;
    position: relative;
    z-index: 0 !important;
    min-height: 100vh !important;
    margin-bottom: 0 !important;
}

.footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    /*background: t;*/
    height: 50px;
    z-index: 1;
    color: #fff;
    padding: 15px 10px !important;
}

.mailuserlabel {
    float: left;
    margin-top: -3px !important;
    margin-left: 20px
}

.no-radius {
    border-radius: 0 !important;
}

.no-shadow {
    box-shadow: none !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.no-lrborder {
    border-left: none !important;
    border-right: none !important;
}

.sidemenu {
    top: 61px !important;
}

.admin > div.pusher > div > div.toc > div {
    padding-bottom: 100px;
}

.filtr-container > div {
    padding: 6.5px !important;
}

.extra.text {
    max-width: 100% !important;
}

.ui.buttons .or:before {
    line-height: 1.65em;
}

.centerla {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
}

.ui.sidebar.thinside {
    overflow: visible !important;
}

.ui.pointing.dropdown > .menu {
    border-radius: .28571429rem !important;
}

.embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.transition.demo .button {
    margin-bottom: .5em;
}

.no-border,
.ui.horizontal.segments {
    border: none !important;
}

.text-white,
.whitetext {
    color: #fff !important;
}

.logoImg {
    margin: 0 auto !important;
}

/* =============Some Css Settings============ */

/* =============Scrollbar Ios============ */
html.ios {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

html.ios,
html.ios body {
    height: initial !important;
}

/* =============Scrollbar Ios============ */

/* =============Hide Scrollbar============= */
.sidebar::-webkit-scrollbar {
    display: none !important;
}

/* =============Hide Scrollbar============= */

/* =============Footer Colorize Button============ */
.colorize {
    margin-top: -5px !important;
    padding: 10px 5px 7px 10px !important;
}

/* =============Footer Colorize Button============ */

/* =============Extra Segment and Tooltip Color============= */
.nightli {
    background: #2e3e4e;
    color: #fff;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.nightli.bottom.popup:before,
.ui.inverted.nightli.left.center.popup:before,
.ui.inverted.nightli.right.center.popup:before,
.ui.inverted.nightli.top.popup:before {
    background: #2e3e4e !important;
}

.whiteli {
    background: #fff !important;
    color: #2e3e4e !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.whiteli.bottom.popup:before,
.ui.inverted.whiteli.left.center.popup:before,
.ui.inverted.whiteli.right.center.popup:before,
.ui.inverted.whiteli.top.popup:before {
    background: #fff;
}

.redli {
    background: #F25F5C !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.redli.bottom.popup:before,
.ui.inverted.redli.left.center.popup:before,
.ui.inverted.redli.right.center.popup:before,
.ui.inverted.redli.top.popup:before {
    background: #F25F5C;
}

.blueli {
    background: #247BA0 !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.blueli.bottom.popup:before,
.ui.inverted.blueli.left.center.popup:before,
.ui.inverted.blueli.right.center.popup:before,
.ui.inverted.blueli.top.popup:before {
    background: #247BA0;
}

.yellowli {
    background: #FFE066 !important;
    color: #50514F !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.yellowli.bottom.popup:before,
.ui.inverted.yellowli.left.center.popup:before,
.ui.inverted.yellowli.right.center.popup:before,
.ui.inverted.yellowli.top.popup:before {
    background: #FFE066;
}

.greyli {
    background: #50514F !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.greyli.bottom.popup:before,
.ui.inverted.greyli.left.center.popup:before,
.ui.inverted.greyli.right.center.popup:before,
.ui.inverted.greyli.top.popup:before {
    background: #50514F;
}

.greenli {
    background: #32936F !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.greenli.bottom.popup:before,
.ui.inverted.greenli.left.center.popup:before,
.ui.inverted.greenli.right.center.popup:before,
.ui.inverted.greenli.top.popup:before {
    background: #32936F;
}

.darkpurpleli {
    background: #2A1A1F !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.darkpurpleli.bottom.popup:before,
.ui.inverted.darkpurpleli.left.center.popup:before,
.ui.inverted.darkpurpleli.right.center.popup:before,
.ui.inverted.darkpurpleli.top.popup:before {
    background: #2A1A1F;
}

.darkorangeli {
    background: #764134 !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.darkorangeli.bottom.popup:before,
.ui.inverted.darkorangeli.left.center.popup:before,
.ui.inverted.darkorangeli.right.center.popup:before,
.ui.inverted.darkorangeli.top.popup:before {
    background: #764134;
}

.greenli2 {
    background: #307473 !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.greenli2.bottom.popup:before,
.ui.inverted.greenli2.left.center.popup:before,
.ui.inverted.greenli2.right.center.popup:before,
.ui.inverted.greenli2.top.popup:before {
    background: #307473;
}

.pinkli {
    background: #E76D83 !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.pinkli.bottom.popup:before,
.ui.inverted.pinkli.left.center.popup:before,
.ui.inverted.pinkli.right.center.popup:before,
.ui.inverted.pinkli.top.popup:before {
    background: #E76D83;
}

.lightyellowli {
    background: #EFD28D !important;
    color: #001011 !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.lightyellowli.bottom.popup:before,
.ui.inverted.lightyellowli.left.center.popup:before,
.ui.inverted.lightyellowli.right.center.popup:before,
.ui.inverted.lightyellowli.top.popup:before {
    background: #EFD28D;
}

.darkli {
    background: #001011 !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.darkli.bottom.popup:before,
.ui.inverted.darkli.left.center.popup:before,
.ui.inverted.darkli.right.center.popup:before,
.ui.inverted.darkli.top.popup:before {
    background: #001011;
}

.pinkli2 {
    background: #C1839F !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.pinkli2.bottom.popup:before,
.ui.inverted.pinkli2.left.center.popup:before,
.ui.inverted.pinkli2.right.center.popup:before,
.ui.inverted.pinkli2.top.popup:before {
    background: #C1839F;
}

.lightbrownli {
    background: #E1B07E !important;
    color: #fff !important;
    text-shadow: none !important;
    background-image: none !important;
}

.ui.inverted.lightbrownli.bottom.popup:before,
.ui.inverted.lightbrownli.left.center.popup:before,
.ui.inverted.lightbrownli.right.center.popup:before,
.ui.inverted.lightbrownli.top.popup:before {
    background: #E1B07E;
}

/* =============Extra Segment and Tooltip Color============= */

/* =============Extra Pages Settings============ */
.error404 {
    background: url(../../images/../../images/404.png) no-repeat top center #6a8733;
    background-size: cover;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

.errorcontainer {
    padding: 5em;
}

.errorcontainer h1 {
    font-size: 4em !important;
}

.lockmecontainer {
    padding: 20em;
}

.forgotcontainer {
    padding: 15em 30em;
}

.signupcontainer {
    padding: 10em;
}

.forgotcontainer .segment {
    width: 288px;
}

.comingsoon {
    background: #307473;
    color: #fff;
}

.comingsooncontainer {
    margin: 0 auto;
    padding: 300px 0;
}

.lockme,
.forgot,
.signup,
.signin {
    background: #3f9643;
    width: 100%;
    min-height: 100%;
    /*overflow: hidden;*/
    padding-top: 0%;
}

.signin .ui.form .field > label {
    text-align: left;
}

/* =============Extra Pages Settings============ */

.containerli {
    margin-top: 60px;
    margin-bottom: 40px;
}

.containerliSettings {
    margin-top: 56px;
    margin-bottom: 50px;
}

.pricelist .item {
    padding: 1em 0 !important;
}

/* =============Timeline============ */
.timeline {
    border-left: 1px solid #307473;
    margin-left: 15px !important;
    position: relative;
    padding-bottom: 10px;
}

.timeline:after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    position: absolute;
    left: -8.8px;
    border-radius: 50%;
    background: #307473;
    margin-bottom: 10px;
}

.timeline .event {
    margin-left: -18px !important;
}

/* =============Timeline============ */

/* =============Profile Page============ */
.profileheader {
    background: url(../images/profileheader.jpg) no-repeat top center;
    background-size: cover;
    width: 100%;
    height: 167px;
    float: right !important;
    text-align: right;
    padding: 3em !important;
}

.profilepage .image i {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 10px;
    margin-top: 5px;
}

/* =============Profile Page============ */

/* =============Todo Page============ */
#task-form {
    margin: 80px 0;
}

#task-form input {
    height: 80px;
    width: 80%;
    padding-left: 20px;
}

#task-list {
    min-height: 325px;
    padding: 50px 0;
}

#task-container ul {
    overflow: hidden;
}

#task-container .task-headline {
    display: none;
    color: #666;
    border-bottom: 1px solid #C8C7BB;
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-size: 1.6em;
    position: relative;
}

#task-container .task-headline:before {
    height: 1px;
    width: 100%;
    background: #FFF;
    position: absolute;
    content: " ";
    bottom: 0;
    left: 0;
}

#task-container .nothing-message {
    background: url(../img/todo.png) no-repeat center 0;
    height: 100%;
    color: #666;
    background-size: contain;
}

#task-container li {
    float: left;
    width: 49%;
    overflow: auto;
    height: auto;
    min-height: 10px;
    background: #FFF;
    display: inline-block;
    border: 1px solid #CCC;
    color: #666;
    border-top: 9px solid #39D1B4;
    cursor: pointer;
    margin-bottom: 10px;
    margin-right: 2%;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
    position: relative;
    padding: 20px;
}

#task-container li:nth-child(even) {
    margin-right: 0;
}

#task-container li:hover {
    opacity: 0.8;
    border-top: 9px solid #F0553B;
}

#task-container p {
    line-height: 1.6em;
    text-align: left;
}

#task-container li.complete {
    opacity: 0.3;
    border-top: 9px solid #666;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}

#task-container li.complete:before {
    background: url(../img/complete.png) no-repeat;
    position: absolute;
    top: 5px;
    right: 5px;
    content: "";
    width: 55px;
    height: 55px;
    background-size: 100%;
}

#task-container li.complete:hover {
    border-top: 9px solid #F0553B;
    opacity: 0.6;
}

#task-container li.complete p {
    text-decoration: line-through;
}

.contactcheck {
    padding-top: 6px;
}

/* =============Todo Page============ */

/* =============Horizontal Segmnets Border-Radius(index.html)============ */
.ui.horizontal.segments > .segment:first-child {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.ui.horizontal.segments > .segment:last-child {
    -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* =============Horizontal Segmnets Border-Radius(index.html)============ */

/* =============Sidebar,Navbar Change Color List============= */
.colorlist,
.sidecolor {
    float: left !important;
    text-align: left !important;
    -webkit-padding-start: 0 !important;
    list-style: none;
    max-width: 180px;
}

.colorlist li,
.sidecolor li {
    float: left;
    cursor: pointer;
    margin: 1px;
}

.colorlist li a,
.sidecolor li a {
    width: 10px;
    height: 10px;
    display: block;
}

/* =============Sidebar,Navbar Change Color List============= */

/* =============Calendar Add Event List Change Color List============= */
.calendarcolorlist {
    float: left !important;
    text-align: left !important;
    -webkit-padding-start: 0 !important;
    list-style: none;
    max-width: 100%;
    margin: 0;
}

.calendarcolorlist li {
    float: left;
    cursor: pointer;
    margin: 1px;
}

.calendarcolorlist li a.segment {
    width: 42.7px !important;
    height: 10px;
    display: block;
}

/* =============Calendar Add Event List Change Color List============= */

@media screen and (max-width: 1144px) {
    .navmenu {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
}

@media only screen and (max-width: 420px) {
    .fixed.top.menu {
        display: none;
    }
}

/* =============Sparkline Chart Tooltip============= */
.jqstooltip {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* =============Sparkline Chart Tooltip============= */

/* =============Extra Radio and Checkbox Color============= */
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.red:before {
    background: #F25F5C !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.yellow:before {
    background: #EFD28D !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.blue:before {
    background: #247BA0 !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.green:before {
    background: #307473 !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.black:before {
    background: #001011 !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.orange:before {
    background: orange !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.grey:before {
    background: #666 !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.pink:before {
    background: #C1839F !important;
}

.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .coloring.brown:before {
    background: #764134 !important;
}

.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ .coloring.red:before {
    background: #F25F5C !important;
}

.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ .coloring.yellow:before {
    background: #EFD28D !important;
}

.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ .coloring.blue:before {
    background: #247BA0 !important;
}

.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ .coloring.green:before {
    background: #307473 !important;
}

.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ .coloring.black:before {
    background: #001011 !important;
}

.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ .coloring.orange:before {
    background: orange !important;
}

.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ .coloring.grey:before {
    background: #666 !important;
}

.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ .coloring.pink:before {
    background: #C1839F !important;
}

.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ .coloring.brown:before {
    background: #764134 !important;
}

.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ .coloring.red:after {
    background: #F25F5C !important;
}

.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ .coloring.yellow:after {
    background: #EFD28D !important;
}

.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ .coloring.blue:after {
    background: #247BA0 !important;
}

.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ .coloring.green:after {
    background: #307473 !important;
}

.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ .coloring.orange:after {
    background: orange !important;
}

.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ .coloring.grey:after {
    background: #666 !important;
}

.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ .coloring.pink:after {
    background: #C1839F !important;
}

.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ .coloring.brown:after {
    background: #764134 !important;
}

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ .coloring.red:after {
    color: #F25F5C !important;
}

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ .coloring.yellow:after {
    color: #EFD28D !important;
}

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ .coloring.blue:after {
    color: #247BA0 !important;
}

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ .coloring.green:after {
    color: #307473 !important;
}

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ .coloring.orange:after {
    color: orange !important;
}

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ .coloring.grey:after {
    color: #666 !important;
}

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ .coloring.pink:after {
    color: #C1839F !important;
}

.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ .coloring.brown:after {
    color: #764134 !important;
}

/* =============Extra Radio and Checkbox Color============= */

/* =============Editable Table Button Fix============= */
.editbtn {
    float: left !important;
    margin-left: 5px !important;
}

/* =============Editable Table Button Fix============= */

/* =============Html Editor Width Fix============= */
.trumbowyg-box,
.trumbowyg-editor {
    width: 100%;
    margin: 0 auto;
}

/* =============Html Editor Width Fix============= */

/* =============Mail SideMenu============= */
.mailmenu {
    background: #1D2127 !important;
}

.mailmenu .item {
    color: #ABB4BE !important;
}

.thinmailmenu {
    background: #1D2127 !important;
}

.thinmailmenu .item,
.thinmailmenu .item .icon {
    color: #fff !important;
}

.ui.thinmailmenu.menu .item > .label {
    float: left !important;
    margin-left: 25px !important;
}

.thinside .header {
    border: none !important;
}

.thinside .header .icon {
    color: #1D2127 !important;
}

/* =============Thin Mail Menu============= */

/* =============Button,Label,Input Margin Fix On Tablet============= */
.ui.button, .ui.label, .ui.input, form .ui.dropdown {
    margin-bottom: 5px;
}

/* =============Button,Label,Input Margin Fix On Tablet============= */

/* =============Mobil Side Menu Z-Index Fix============= */
#toc {
    z-index: 999;
}

/* =============Mobil Side Menu Z-Index Fix============= */

/* =============Sidebar Layout============= */
.admin > .pusher > .full.height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.admin:not(.site) > .pusher > .full.height {
    background-color: #FFFFFF;
}

/* page layout */
.admin .full.height > .toc {
    position: relative;
    z-index: 1;
    width: 250px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.admin > div.pusher > div > div.toc > div > div > div:nth-child(1) > a {
    margin-bottom: 0;
}

.admin .full.height > .toc .ui.menu {
    border-radius: 0;
    border-width: 0 1px 0 0;
    box-shadow: none;
    margin: 0;
    width: inherit;
    overflow: hidden;
    will-change: transform;
}

.admin .article {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* Hide Top Bar */
@media only screen and (min-width: 1145px) {
    .admin .fixed.main.menu {
        display: none;
    }
}

/* Remove Fixed Sidebar /  Show Top Bar */
@media only screen and (max-width: 1144px) {
    /* Hide Fixed Sidebar */
    .admin .full.height > .toc {
        display: none;
    }
}

/* =============Sidebar Layout============= */

/* =============Chat Page Css============= */
.people-list {
}

.people-list .search {
    padding: 20px;
}

.people-list input {
    border-radius: 3px;
    border: none;
    padding: 14px;
    color: white;
    background: #6A6C75;
    width: 90%;
    font-size: 14px;
}

.people-list .fa-search {
    position: relative;
    left: -25px;
}

.people-list ul {
    padding: 20px;
    height: 770px;
}

.people-list ul li {
    padding-bottom: 20px;
}

.people-list img {
    float: left;
    width: 55px;
    height: 55px;
    border: solid 3px #86BB71;
}

.people-list .about {
    float: left;
    margin-top: 8px;
}

.people-list .about {
    padding-left: 8px;
}

.people-list .status {
    color: #92959E;
}

.chat {
    background: #F2F5F8;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    color: #434651;
}

.chat .chat-header {
    padding: 20px;
    border-bottom: 2px solid white;
}

.chat .chat-header img {
    float: left;
    width: 55px;
    height: 55px;
}

.chat .chat-header .chat-about {
    float: left;
    padding-left: 10px;
    margin-top: 6px;
}

.chat .chat-header .chat-with {
    font-weight: bold;
    font-size: 16px;
}

.chat .chat-header .chat-num-messages {
    color: #92959E;
}

.chat .chat-header .fa-star {
    float: right;
    color: #D8DADF;
    font-size: 20px;
    margin-top: 12px;
}

.chat .chat-history {
    padding: 30px 30px 20px;
    border-bottom: 2px solid white;
    overflow-y: scroll;
    height: 575px;
}

.chat .chat-history ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chat .chat-history .message-data {
    margin-bottom: 15px;
}

.chat .chat-history .message-data-time {
    color: #a8aab1;
    padding-left: 6px;
}

.chat .chat-history .message {
    color: white;
    padding: 18px 20px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    margin-bottom: 30px;
    width: 90%;
    position: relative;
}

.chat .chat-history .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #86BB71;
    border-width: 10px;
    margin-left: -10px;
}

.chat .chat-history .my-message {
    background: #86BB71;
}

.chat .chat-history .other-message {
    background: #94C2ED;
}

.chat .chat-history .other-message:after {
    border-bottom-color: #94C2ED;
    left: 93%;
}

.chat .chat-message {
    padding: 30px;
}

.chat .chat-message textarea {
    width: 100%;
    border: none;
    padding: 10px 20px;
    font: 14px/22px "Lato", Arial, sans-serif;
    margin-bottom: 10px;
    border-radius: 5px;
    resize: none;
}

.chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o {
    font-size: 16px;
    color: gray;
    cursor: pointer;
}

.chat .chat-message button {
    float: right;
    color: #94C2ED;
    font-size: 16px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    font-weight: bold;
    background: #F2F5F8;
}

.chat .chat-message button:hover {
    color: #75b1e8;
}

.online, .offline, .me {
    margin-right: 3px;
    font-size: 10px;
}

.online {
    color: #86BB71;
}

.offline {
    color: #E38968;
}

.me {
    color: #94C2ED;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.float-right {
    float: right;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

/* =============Chat Page Css============= */

/* =============Calendar Page Css============= */
#calendar .datepicker {
    width: auto;
    max-width: 100%;
}

#calendar {
    padding-bottom: 16px;
}

#calendar .datepicker th:hover {
    background: none;
}

#calendar .table-condensed {
    margin-top: 16px;
    margin-bottom: 8px;
    width: 100%;
}

#calendar .table-condensed thead th {
    font-weight: 400;
}

#calendar .table-condensed th.prev,
#calendar .table-condensed th.next {
    position: relative;
    color: #d81b60;
}

#calendar .table-condensed th.prev:before,
#calendar .table-condensed th.next:before {
    font-family: 'Material Icons';
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    -ms-word-wrap: normal;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    left: 50%;
    position: absolute;
    top: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #FFF;
}

#calendar .table-condensed th.prev:before {
    content: "<";
}

#calendar .table-condensed th.next:before {
    content: ">";
}

#calendar .table-condensed thead tr:first-child {
    background: #d81b60;
    font-weight: 400;
}

#calendar .table-condensed thead tr:nth-child(2) th {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

#calendar .table-condensed .old,
#calendar .table-condensed .new {
    color: rgba(255, 255, 255, 0.3);
}

#calendar .table-condensed .day {
    border-radius: 4px;
    height: 36px;
}

#calendar .table-condensed .day:hover {
    border-radius: 4px;
}

#calendar .table-condensed .month:hover {
    background: #ec407a;
}

#calendar .table-condensed .today {
    background: none;
    color: #e91e63;
    z-index: 1;
    position: relative;
}

#calendar .table-condensed .today:after {
    content: '';
    background-color: #fde0dc;
    height: 32px;
    width: 32px;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
}

#calendar .table-condensed .active,
#calendar .table-condensed .day:hover {
    color: #e91e63 !important;
    background: none !important;
    z-index: 1;
    position: relative;
}

#calendar .table-condensed .active:after,
#calendar .table-condensed .day:hover:after {
    content: '';
    background-color: #f8bbd0;
    height: 32px;
    width: 32px;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
}

.calendarbtn {
    height: 40px !important;
}

.fc-event {
    padding: 5px !important;
}

/* =============Calendar Page Css============= */

/* =============Datatable Page Css============= */

.ui.table.dataTable thead th {
    cursor: pointer;
    white-space: nowrap;
    border-left: 1px solid rgba(34, 36, 38, 0.15);
    color: rgba(0, 0, 0, 0.87);
}

.ui.table.dataTable thead th:first-child {
    border-left: none;
}

.ui.table.dataTable thead .sorting,
.ui.table.dataTable thead .sorting_asc,
.ui.table.dataTable thead .sorting_desc,
.ui.table.dataTable thead .sorting_asc_disabled,
.ui.table.dataTable thead .sorting_desc_disabled,
.ui.table.dataTable thead .sorting:hover,
.ui.table.dataTable thead .sorting_asc:hover,
.ui.table.dataTable thead .sorting_desc:hover,
.ui.table.dataTable thead .sorting_asc_disabled:hover,
.ui.table.dataTable thead .sorting_desc_disabled:hover {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ui.table.dataTable thead th:after {
    display: none;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    content: '';
    height: 1em;
    width: auto;
    opacity: 0.8;
    margin: 0em 0em 0em 0.5em;
    font-family: 'Icons';
}

.ui.table.dataTable thead th.sorting_asc:after {
    /*content: '\f0d8';*/
    content: '\f160';
}

.ui.table.dataTable thead th.sorting_desc:after {
    /*content: '\f0d7';*/
    content: '\f161';
}

.ui.table.dataTable thead th.sorting:after {
    content: '\f0dc';
    opacity: 0.2;
}

/* Hover */

.ui.table.dataTable th.disabled:hover {
    cursor: auto;
    color: rgba(40, 40, 40, 0.3);
}

.ui.table.dataTable thead th:hover {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.8);
}

/* Sorted */

.ui.table.dataTable thead .sorting_asc,
.ui.table.dataTable thead .sorting_desc,
.ui.table.dataTable thead .sorting_asc_disabled,
.ui.table.dataTable thead .sorting_desc_disabled {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.95);
}

.ui.table.dataTable thead .sorting:after,
.ui.table.dataTable thead .sorting_asc:after,
.ui.table.dataTable thead .sorting_desc:after,
.ui.table.dataTable thead .sorting_asc_disabled:after,
.ui.table.dataTable thead .sorting_desc_disabled:after {
    display: inline-block;
}

/* Sorted Hover */

.ui.table.dataTable thead .sorting_asc:hover,
.ui.table.dataTable thead .sorting_desc:hover,
.ui.table.dataTable thead .sorting_asc_disabled:hover,
.ui.table.dataTable thead .sorting_desc_disabled:hover {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.95);
}

.dataTables_length select {
    background: #fff none repeat scroll 0 0;
    border: 1px solid rgba(34, 36, 38, 0.15);
    border-radius: 0.285714rem;
    box-shadow: none;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    display: inline-block;
    line-height: 1.2142em;
    min-height: 0.714286em;
    outline: 0 none;
    padding: 0.3em;
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -moz-transition: box-shadow 0.1s ease 0s, width 0.1s ease 0s;
    -o-transition: box-shadow 0.1s ease 0s, width 0.1s ease 0s;
    -webkit-transition: box-shadow 0.1s ease 0s, width 0.1s ease 0s;
    transition: box-shadow 0.1s ease 0s, width 0.1s ease 0s;
    white-space: normal;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.dataTables_wrapper .dataTables_filter {
    text-align: right;
    color: rgba(0, 0, 0, 0.87);
    display: inline-flex;
    position: relative;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    padding-top: 0.755em;
}

/* =============Datatable Page Css============= */

/* =============Grid Page Css============= */

#grid {
    padding: 0 3em;
}

#grid h2 {
    margin: 2em 0 1.5em;
}

#grid .shaded.examples .row {
    position: relative;
}

#grid .shaded.examples .grid > .column {
    position: relative;
    z-index: 11;
}

#grid .divided.examples .grid .column:not(.row):after {
    background-color: rgba(255, 255, 255, 0.1);
    content: "";
    display: block;
    min-height: 3em;
}

#grid .nested.examples .grid .grid {
    box-shadow: 0 0 0 1px #AAA inset;
}

#grid .simple.examples .grid .column:not(.row):not(.grid):after {
    content: "";
    display: block;
    min-height: 50px;
}

#grid .shaded.examples .grid .column:not(.row):after,
#grid .nested.examples .grid .grid .column:after {
    background-color: #FFF;
    box-shadow: 0 0 0 1px #DDD inset;
    content: "";
    display: block;
    min-height: 3em;
}

/* =============Grid Page Css============= */

/* =============Mailbox Page Css============= */

.circle-icon {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    border: 2px solid #B4BBC1;
    border-radius: 100px;
    font-size: 14px;
    color: #B4BBC1;
    cursor: pointer;
    display: block;
    float: left;
}

.circle-icon.small {
    height: 25px;
    width: 25px;
    line-height: 23px;
    font-size: 11px;
}

.circle-icon:hover {
    color: #57636C;
    border-color: #57636C;
}

.circle-icon.red {
    color: #D23B3D;
    border-color: #D23B3D;
}

.circle-icon.red:hover {
    color: #791C1E;
    border-color: #791C1E;
}

.checkbox-wrapper {
    cursor: pointer;
    height: 20px;
    width: 20px;
    position: relative;
    display: inline-block;
    box-shadow: inset 0 0 0 1px #A3ADB2;
    border-radius: 1px;
}

.checkbox-wrapper input {
    opacity: 0;
    cursor: pointer;
}

.checkbox-wrapper input:checked ~ label {
    opacity: 1;
}

.checkbox-wrapper label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background: #A3ADB2;
    opacity: 0;
    transition-duration: .05s;
}

.checkbox-wrapper label:hover {
    background: #95a1a6;
    opacity: .5;
}

.checkbox-wrapper label:active {
    background: #87949b;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 300px;
    background: #1D2127;
    transition-duration: .3s;
    z-index: 5;
}

#sidebar,
#sidebar a {
    color: #ABB4BE;
}

#sidebar .logo-container {
    font-weight: 100;
    font-size: 50px;
    line-height: 40px;
    text-align: center;
    margin: 50px 0;
    cursor: pointer;
}

#sidebar .logo-container .logo {
    position: relative;
    top: -6px;
    font-size: 25px;
    margin-right: 15px;
    padding: 10px;
    border: 2px solid #61C7B3;
    border-radius: 100px;
    text-indent: 1px;
    color: #61C7B3;
}

#sidebar .compose-button {
    border-radius: 100px;
    padding: 13px 20px;
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    color: #61C7B3;
    border: 2px solid #61C7B3;
    display: block;
    margin: 0 50px 30px 50px;
    cursor: pointer;
}

#sidebar .compose-button:hover {
    color: #ABB4BE;
    border-color: #ABB4BE;
}

#sidebar .menu-segment {
    padding: 0 50px 0 70px;
}

#sidebar .menu-segment ul,
#sidebar .menu-segment li {
    margin: 0;
    padding: 0;
}

#sidebar .menu-segment .ball.pink {
    border-color: #EA4C89;
}

#sidebar .menu-segment .ball.green {
    border-color: #9AE14F;
}

#sidebar .menu-segment .ball.blue {
    border-color: #1BC3E1;
}

#sidebar .menu-segment li.title {
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 0;
    color: #465162;
}

#sidebar .menu-segment li.title .icon {
    float: right;
}

#sidebar .menu-segment li.active a,
#sidebar .menu-segment li.active a:hover {
    background: #282d36;
}

#sidebar .menu-segment li a {
    display: block;
    margin: 0 -50px 0 -70px;
    padding: 10px 50px 10px 70px;
}

#sidebar .menu-segment li a:hover {
    background: #21262d;
}

#sidebar .menu-segment li .italic-link {
    margin-left: -30px;
    font-style: italic;
    color: #465162;
}

#sidebar .menu-segment li .italic-link,
#sidebar .menu-segment li .italic-link:hover {
    background: transparent;
}

#sidebar .menu-segment li .italic-link:hover {
    color: #ABB4BE;
}

#sidebar .menu-segment .labels li a span,
#sidebar .menu-segment .chat li a span {
    display: block;
    border: 5px solid red;
    border-radius: 100px;
    margin-top: 6px;
}

#sidebar .menu-segment .labels.labels li a span,
#sidebar .menu-segment .chat.labels li a span {
    float: right;
}

#sidebar .menu-segment .labels.chat li a span,
#sidebar .menu-segment .chat.chat li a span {
    float: left;
    margin-right: 10px;
}

#sidebar .menu-segment .chat li a {
    padding-left: 50px;
}

#sidebar .separator {
    margin: 30px 35px;
    height: 1px;
    background: #2D3138;
}

#sidebar .bottom-padding {
    height: 100px;
}

#sidebar > .nano-pane {
    background: transparent;
}

#sidebar > .nano-pane .nano-slider {
    background: rgba(255, 255, 255, 0.1);
}

.show-main-overlay .overlay {
    opacity: 1;
    bottom: 0;
    transition-duration: .5s;
}

.header .page-title {
    display: block;
}

.header .page-title .sidebar-toggle-btn {
    width: 0;
    margin-top: 1px;
    padding: 11px 0 0 0;
    float: left;
    position: relative;
    display: block;
    cursor: pointer;
    transition-duration: .3s;
    transition-delay: .5s;
    opacity: 0;
    margin-right: 0;
}

.show-sidebar .header .page-title .sidebar-toggle-btn {
    transition-delay: 0s;
}

.header .page-title .sidebar-toggle-btn .line {
    height: 3px;
    display: block;
    background: #888;
    margin-bottom: 4px;
    transition-duration: .5s;
    transition-delay: .5s;
}

.show-sidebar .header .page-title .sidebar-toggle-btn .line-angle1 {
    transform: rotate(-120deg);
}

.show-sidebar .header .page-title .sidebar-toggle-btn .line-angle2 {
    transform: rotate(120deg);
}

.header .page-title .sidebar-toggle-btn .line-angle1 {
    width: 8px;
    margin: 0;
    position: absolute;
    top: 15px;
    left: -11px;
    transform: rotate(-60deg);
}

.header .page-title .sidebar-toggle-btn .line-angle2 {
    width: 8px;
    margin: 0;
    position: absolute;
    top: 21px;
    left: -11px;
    transform: rotate(60deg);
}

.header .page-title .icon {
    font-size: 15px;
    margin-left: 20px;
    position: relative;
    top: -5px;
    cursor: pointer;
}

.header .search-box {
    float: right;
    width: 150px;
    height: 40px;
    position: relative;
}

.header .search-box input,
.header .search-box .icon {
    transition-duration: .3s;
}

.header .search-box input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    text-indent: 15px;
    height: 40px;
    z-index: 2;
    outline: none;
    color: #999;
    background: transparent;
    border: 2px solid #EFEFEF;
    border-radius: 5px;
    transition-timing-function: cubic-bezier(0.3, 1.5, 0.6, 1);
}

.header .search-box input:focus {
    color: #333;
    border-color: #d6d6d6;
    width: 150%;
}

.header .search-box input:focus ~ .icon {
    opacity: 1;
    z-index: 3;
    color: #61C7B3;
}

.header .search-box .icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    text-align: center;
    line-height: 40px;
    z-index: 1;
    cursor: pointer;
    opacity: .5;
}

.action-bar {
    padding: 20px 60px;
    border-bottom: 1px solid #EFEFEF;
    overflow: hidden;
}

.action-bar li {
    float: left;
    margin-right: 10px;
}

#main-nano-wrapper {
    position: absolute;
    top: 157px;
    bottom: 100px;
    left: 0;
    min-height: 690px !important;
    background: #fff;
}

.message-list {
    display: block;
    padding: 0;
    margin: 0;
}

.message-list li {
    position: relative;
    display: block;
    height: 50px;
    line-height: 50px;
    cursor: default;
    transition-duration: .3s;
    cursor: pointer;
}

.message-list li:hover,
.message-list li.active,
.message-list li.selected {
    background: #EFEFEF;
    transition-duration: .05s;
}

.message-list li.active,
.message-list li.active:hover {
    box-shadow: inset 5px 0 0 #61C7B3;
}

.message-list li.unread {
    font-weight: 600;
    color: #555;
}

.message-list li .col {
    float: left;
    position: relative;
}

.message-list li.blue-dot .col-1 .dot {
    border-color: #1BC3E1;
}

.message-list li.orange-dot .col-1 .dot {
    border-color: #E2A917;
}

.message-list li.green-dot .col-1 .dot {
    border-color: #9AE14F;
}

.message-list li .col-1 {
    width: 400px;
}

.message-list li .col-1 .star-toggle,
.message-list li .col-1 .checkbox-wrapper,
.message-list li .col-1 .dot {
    display: block;
    float: left;
}

.message-list li .col-1 .dot {
    border: 4px solid transparent;
    border-radius: 100px;
    margin: 22px 26px 0;
    height: 0;
    width: 0;
    line-height: 0;
    font-size: 0;
}

.message-list li .col-1 .checkbox-wrapper {
    margin-top: 15px;
    margin-right: 10px;
}

.message-list li .col-1 .star-toggle {
    margin-top: 15px;
}

.message-list li .col-1 .title {
    position: absolute;
    top: 0;
    left: 140px;
    right: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.message-list li .col-2 {
    position: absolute;
    top: 0;
    left: 400px;
    right: 0;
    bottom: 0;
}

.message-list li .col-2 .subject,
.message-list li .col-2 .date {
    position: absolute;
    top: 0;
}

.message-list li .col-2 .subject {
    left: 0;
    right: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.message-list li .col-2 .date {
    right: 0;
    width: 200px;
    padding-left: 80px;
}

.load-more-link {
    display: block;
    text-align: center;
    margin: 30px 0 100px 0;
}

#message {
    position: relative !important;
    top: 0;
    left: 0 !important;
    bottom: 0;
    width: 100% !important;
    z-index: 5;
    transform: translateX(200%);
    transition-duration: .5s;
    padding: 50px 30px;
    background: #EFEFEF;
}

.show-message #message {
    transition-duration: .3s;
}

#message .header {
    margin-bottom: 30px;
    padding: 0;
}

#message .header .page-title {
    display: block;
    float: none;
    margin-bottom: 20px;
}

#message .header .page-title .icon {
    margin-top: 4px;
    margin-right: 10px;
}

#message .header .grey {
    margin-left: 10px;
    color: #999;
}

#message #message-nano-wrapper {
    position: absolute;
    top: 165px;
    bottom: 0;
    height: auto;
    left: 0;
    right: 0;
    width: auto;
}

#message .message-container {
    padding: 0 30px;
}

#message .message-container li {
    padding: 25px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #FFF;
    margin: 0 0 30px 0;
    position: relative;
}

#message .message-container li:hover .details .left .arrow {
    background: #61C7B3;
    border: 0px solid #61C7B3;
}

#message .message-container li:hover .details .left .arrow.orange {
    background: #E2A917;
    border: 0px solid #E2A917;
}

#message .message-container li .details {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    overflow: hidden;
}

#message .message-container li .details .left {
    float: left;
    font-weight: 600;
    color: #888;
    transition-duration: .3s;
}

#message .message-container li .details .left .arrow {
    display: inline-block;
    position: relative;
    height: 2px;
    width: 20px;
    background: rgba(0, 0, 0, 0.15);
    vertical-align: top;
    margin-top: 12px;
    margin: 12px 20px 0 15px;
    border: 0px solid rgba(0, 0, 0, 0.15);
    transition-duration: .3s;
}

#message .message-container li .details .left .arrow:after {
    position: absolute;
    top: -4px;
    left: 100%;
    height: 0;
    width: 0;
    border: inherit;
    border-width: 7px;
    border-style: solid;
    content: '';
    border-right: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-top-width: 5px;
    border-bottom-width: 5px;
}

#message .message-container li .details .right {
    float: right;
    color: #999;
}

#message .message-container li .message {
    margin-bottom: 40px;
}

#message .message-container li .message p:last-child {
    margin-bottom: 0;
}

#message .message-container li:hover .tool-box .red-hover {
    color: #D23B3D;
    border-color: #D23B3D;
}

#message .message-container li:hover .tool-box .red-hover:hover {
    color: #791C1E;
    border-color: #791C1E;
}

#message .message-container li .tool-box {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 0px solid #DDDFE1;
    border-top-width: 1px;
    border-left-width: 1px;
    padding: 8px 10px;
    transition-duration: .3s;
}

#message .message-container li .tool-box a {
    margin-right: 10px;
}

#message .message-container li .tool-box a:last-child {
    margin-right: 0;
}

.show-message #message {
    transform: none;
}

.show-message {
    margin-right: 40%;
}

@media only screen and (min-width: 1499px) {

}

@media only screen and (max-width: 1500px) {
    .show-message {
        margin-right: 0;
    }

    .show-message #message {
        left: 50%;
        width: 50%;
    }
}

@media only screen and (max-width: 1024px) {
    #sidebar {
        transform: translateX(-100%);
        left: 0;
        box-shadow: none;
    }

    .header .page-title .sidebar-toggle-btn {
        margin-right: 20px;
        opacity: 1;
        width: 20px;
    }

    .show-sidebar #sidebar {
        transform: none;
    }

    .show-sidebar {
        transform: translateX(300px);
    }

    .show-message {
        margin-right: 0;
    }

    .show-message #message {
        left: 20%;
        width: 80%;
    }
}

@media only screen and (max-width: 600px) {
    .header .search-box {
        float: none;
        width: 100%;
        margin-bottom: -110px;
        margin-top: 70px;
    }

    .header .search-box input,
    .header .search-box input:focus {
        width: 100%;
    }

    .header .page-title {
        margin-bottom: 50px;
    }

    #main-nano-wrapper {
        position: absolute;
        top: 260px;
        bottom: 0;
        height: auto;
    }

    .message-list li .col-1 {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 120px;
        width: auto;
    }

    .message-list li .col-2 {
        right: 0;
        left: auto;
        width: 120px;
    }

    .message-list li .col-2 .date {
        padding-left: 0;
        position: static;
    }

    .message-list li .col-2 .subject {
        display: none;
    }
}

.scrollcontent {
    overflow: auto;
    position: relative;
    height: 650px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.scrollcontent.light {
    color: #333;
}

.message p {
    font-size: 1.1em;
    line-height: 1.6em;
}

/* =============Mailbox Page Css============= */

/* =============Timeline Page Css (Horizontal Timeline)============= */

.cd-horizontal-timeline {
    opacity: 0;
    margin: 2em auto;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.cd-horizontal-timeline ol, ul {
    list-style: none;
}

.cd-horizontal-timeline::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'mobile';
    display: none;
}

.cd-horizontal-timeline.loaded {
    /* show the timeline after events position has been set (using JavaScript) */
    opacity: 1;
}

.cd-horizontal-timeline .h-timeline {
    position: relative;
    height: 100px;
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
}

.cd-horizontal-timeline .events-wrapper {
    position: relative;
    height: 100%;
    margin: 0 40px;
    overflow: hidden;
}

.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
    /* these are used to create a shadow effect at the sides of the timeline */
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    width: 20px;
}

.cd-horizontal-timeline .events-wrapper::before {
    left: 0;
    /*background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));
background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));*/
}

.cd-horizontal-timeline .events-wrapper::after {
    right: 0;
    /*background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));*/
}

.cd-horizontal-timeline .events {
    /* this is the grey line/timeline */
    position: absolute;
    z-index: 1;
    left: 0;
    top: 49px;
    height: 2px;
    /* width will be set using JavaScript */
    background: #dfdfdf;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

.cd-horizontal-timeline .filling-line {
    /* this is used to create the green line filling the timeline */
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #7b9d6f;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
}

.cd-horizontal-timeline .events a {
    position: absolute;
    bottom: 0;
    z-index: 2;
    text-align: center;
    font-size: 1.3rem;
    padding-bottom: 15px;
    color: #383838;
    /* fix bug on Safari - text flickering while timeline translates */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.cd-horizontal-timeline .events a::after {
    /* this is used to create the event spot */
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -5px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    background-color: #f8f8f8;
    -webkit-transition: background-color 0.3s, border-color 0.3s;
    -moz-transition: background-color 0.3s, border-color 0.3s;
    transition: background-color 0.3s, border-color 0.3s;
}

.no-touch .cd-horizontal-timeline .events a:hover::after {
    background-color: #7b9d6f;
    border-color: #7b9d6f;
}

.cd-horizontal-timeline .events a.selected {
    pointer-events: none;
}

.cd-horizontal-timeline .events a.selected::after {
    background-color: #7b9d6f;
    border-color: #7b9d6f;
}

.cd-horizontal-timeline .events a.older-event::after {
    border-color: #7b9d6f;
}

@media only screen and (min-width: 1100px) {
    .cd-horizontal-timeline {
        margin: 6em auto;
    }

    .cd-horizontal-timeline::before {
        /* never visible - this is used in jQuery to check the current MQ */
        content: 'desktop';
    }
}

.cd-timeline-navigation a {
    /* these are the left/right arrows to navigate the timeline */
    position: absolute;
    z-index: 1;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    /* replace text with an icon */
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: border-color 0.3s;
    -moz-transition: border-color 0.3s;
    transition: border-color 0.3s;
}

.cd-timeline-navigation a::after {
    /* arrow icon */
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(../img/cd-arrow.svg) no-repeat 0 0;
}

.cd-timeline-navigation a.prev {
    left: 0;
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

.cd-timeline-navigation a.next {
    right: 0;
}

.no-touch .cd-timeline-navigation a:hover {
    border-color: #7b9d6f;
}

.cd-timeline-navigation a.inactive {
    cursor: not-allowed;
}

.cd-timeline-navigation a.inactive::after {
    background-position: 0 -16px;
}

.no-touch .cd-timeline-navigation a.inactive:hover {
    border-color: #dfdfdf;
}

.cd-horizontal-timeline .events-content {
    position: relative;
    width: 100%;
    margin: 1em 0 3em 0;
    overflow: hidden;
    -webkit-transition: height 0.4s;
    -moz-transition: height 0.4s;
    transition: height 0.4s;
    min-height: 150px;
}

.cd-horizontal-timeline .events-content li {
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
    padding: 0 5%;
    opacity: 0;
    -webkit-animation-duration: 0.4s;
    -moz-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.cd-horizontal-timeline .events-content li.selected {
    /* visible event content */
    position: relative;
    z-index: 2;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
    -webkit-animation-name: cd-enter-right;
    -moz-animation-name: cd-enter-right;
    animation-name: cd-enter-right;
}

.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-name: cd-enter-left;
    -moz-animation-name: cd-enter-left;
    animation-name: cd-enter-left;
}

.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}

.cd-horizontal-timeline .events-content li > * {
    max-width: 100%;
    margin: 0 auto;
}

.cd-horizontal-timeline .events-content h2 {
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.2;
}

.cd-horizontal-timeline .events-content em {
    display: block;
    font-style: italic;
    margin: 10px auto;
}

.cd-horizontal-timeline .events-content em::before {
    content: '- ';
}

.cd-horizontal-timeline .events-content p {
    font-size: 1.4rem;
    color: #959595;
}

.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
    line-height: 1.6;
}

@media only screen and (min-width: 768px) {
    .cd-horizontal-timeline .events-content h2 {
        font-size: 1rem;
    }

    .cd-horizontal-timeline .events-content em {
        font-size: 1rem;
    }

    .cd-horizontal-timeline .events-content p {
        font-size: 1.1rem;
    }
}

@-webkit-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@-moz-keyframes cd-enter-right {
    0% {
        opacity: 0;
        -moz-transform: translateX(100%);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}

@keyframes cd-enter-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@-webkit-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
    }
}

@-moz-keyframes cd-enter-left {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0%);
    }
}

@keyframes cd-enter-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
    }
}

/* =============Timeline Page Css (Horizontal Timeline)============= */

/* =============Dashboard Page Morris Chart Css============= */

.morris-hover {
    position: absolute;
    z-index: 1000;
}

.morris-hover.morris-default-style {
    border-radius: 10px;
    padding: 6px;
    color: #666;
    background: rgba(255, 255, 255, 0.8);
    border: solid 2px rgba(230, 230, 230, 0.8);
    font-family: sans-serif;
    font-size: 12px;
    text-align: center;
}

.morris-hover.morris-default-style .morris-hover-row-label {
    font-weight: bold;
    margin: 0.25em 0;
}

.morris-hover.morris-default-style .morris-hover-point {
    white-space: nowrap;
    margin: 0.1em 0;
}

/* =============Dashboard Page Morris Chart Css============= */

/* =============Index Page Css============= */

.article .ui.attached.segment {
    /*margin: 10px;*/
}

.ui.comments .comment img.avatar, .ui.comments .comment .avatar img {
    height: auto;
}

.ui.menu .browse .ui.header {
    margin: 0;
    margin-left: 5px;
}

.ui.form label {
    text-align: left;
}