/*!
 * Start Bootstrap - SB Admin Bootstrap Admin Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */
html, body { height: 100%; }

body {
    background-color: #2b3643;
    font-family: 'Open Sans', sans-serif;
}

#wrapper {
    min-height:100%;
    height:100%;
}

#page-wrapper {
    background-color: #ddd;
    min-height:100%;
    padding-bottom:100px !important;
}
.load {
    position: absolute;
    z-index: 999999999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    border-radius: 6px;
    text-align:center;
    color: #fff !important;
    display:none;
}
.load i {
    margin-top:30px;
}
.huge {
    font-size: 50px;
    line-height: normal;
}
.smaller {
    font-size:50%;
}
.space {
    height:20px;
    display:block;
}
.page-header {
    border-bottom: 1px solid #337ab7 !important;
    color: #337ab7 !important;
}
tbody tr:hover {
    background-color: #eee;
}
.my_style {
    background-color: yellow;
}
/* Back to Top button */

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    text-decoration: none;
    color: #fff;
    background-color: #2b3643;
    opacity:0.7;
    font-size: 20px;
    padding:0px 10px;
    width:50px;
    height:50px;
    text-align:center;
    line-height: 50px;
    display: none;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}

.back-to-top:hover {
    opacity:1;
    color: #fff;
}

/* Login and forgotten password */

.logintitle {
    color:#fff;
    margin: 60px auto;
}

/* Navigation */

.navbar-brand {
    height: 70px;
    line-height: 40px;
    color:#fff !important;
}

.navbar {
    margin-bottom: 0px;
    border: 0;
}
.nav-top-row {
    background-color: #333;
    padding-top:10px;
    padding-bottom:10px;

}
.nav-bottom-row {
    background-color: #01c676;
    border-bottom: 5px solid #00b268;
    box-shadow: 0px 6px 12px rgba(0,0,0,0.175);
}
.nav-pills>li>a {
    color:#fff;
    border-radius: 0px;
    padding: 20px 30px;
}
.nav-pills>li:hover > .dropdown-menu {
        display: block;
}
.nav-pills>li:hover a,
.nav>li>a:focus, 
.nav>li>a:hover,
.nav .open>a, 
.nav .open>a:focus, 
.nav .open>a:hover {
    text-decoration: none;
    background-color: #00b268;
    color:#fff;
}
.dropdown-menu {
    padding: 10px 10px;
    margin: 0px 0 0;
    background-color: #00b268;
    border: 0;
    border-radius: 0px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.nav-pills>li+li {
    margin-left: 0px;
}
.dropdown-menu>li>a {
    padding: 10px 20px;
    color: #b4bcc8;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    color: #fff;
    background: #01c676;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}


.headfixed {
    position:fixed;
    top: 0;
    width:100%;
    z-index:99;
}

/* Top Navigation */

.top-nav {
    padding: 0 15px;
}

.top-nav>li {
    display: inline-block;
    float: left;
}

.top-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 40px;
    color:#fff;
    font-weight: 300;
    letter-spacing:1px;
}

.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
    color: #fff;
    background-color: #00b268;
}

.top-nav>.open>.dropdown-menu {
    float: left;
    position: absolute;
    margin-top: 0;
    border: 0px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #00b268;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.top-nav>.open>.dropdown-menu>li>a {
    white-space: normal;
    background-color: #00b268;
    color:#fff;
}
.top-nav>.open>.dropdown-menu>li>a:hover {
    white-space: normal;
    background-color: #01c676;
    color:#fff;
}
.top-nav>#messages.open>.dropdown-menu {
    right:0;
    width: 600px;
}
.top-nav>#messages.open>.dropdown-menu>li{
    overflow: hidden;
}
.top-nav>#messages.open>.dropdown-menu>li>a {
    white-space: normal;
    background-color: #fff;
}
.top-nav>#messages.open>.dropdown-menu>li:hover>a {
    background-color: #5d6b7a;
}

/* Special font styles */
.page-header {
    padding-bottom: 9px;
    margin: 40px 0 20px;
    border-bottom: 1px solid #ddd;
    color: #666;
}

/* Comment List */

li.comment-item::before {
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 

}

/* Sort By and Filter */
#sortby, 
#filterby {
    display: inline-block !important;
}
#sortby .dropdown-menu, 
#filterby .dropdown-menu {
    min-width: 0;
    border-radius: 0;
    background-color: #eee;
}
#sortby .dropdown-menu .btn-default, 
#filterby .dropdown-menu .btn-default {
    border:0;
    text-align:left;
    color:#333;
}
#sortby .dropdown-menu .btn-default:hover, 
#filterby .dropdown-menu .btn-default:hover {
    background-color: #01c676;
    color:#fff;
}

/*Search filter */
ul.filter-list {
    list-style: none;
    padding:0;
}
.filter-list > li {
    padding:10px;
    border-bottom: 1px solid #337ab7;
}
.filter-list > li:hover {
    background-color: #eee;
}

/* Flot Chart Containers */

.flot-chart {
    display: block;
    height: 400px;
}

.flot-chart-content {
    width: 100%;
    height: 100%;
}

/* Custom Colored Panels */

.huge {
    font-size: 40px;
}

.panel-green {
    border-color: #5cb85c;
}

.panel-green > .panel-heading {
    border-color: #5cb85c;
    color: #fff;
    background-color: #5cb85c;
}

.panel-green > a {
    color: #5cb85c;
}

.panel-green > a:hover {
    color: #3d8b3d;
}

.panel-red, .panel-danger {
    border-color: #d9534f;
}

.panel-red > .panel-heading, .panel-danger > .panel-heading {
    border-color: #d9534f;
    color: #fff;
    background-color: #d9534f;
}

.panel-red > a, .panel-danger > a {
    color: #d9534f;
}

.panel-red > a:hover, .panel-danger > a:hover {
    color: #b52b27;
}

.panel-yellow {
    border-color: #f0ad4e;
}

.panel-yellow > .panel-heading {
    border-color: #f0ad4e;
    color: #fff;
    background-color: #f0ad4e;
}

.panel-yellow > a {
    color: #f0ad4e;
}

.panel-yellow > a:hover {
    color: #df8a13;
}

/* Custom HR lines */
.panel-primary hr {
    border-top: 1px solid #337ab7;
}
/* Custom BOOTSTRAP styling */

/* Badges */
.badge-primary {
    background-color: #337ab7;
}
.badge-danger {
    /*background-color: #d9534f !important;*/
    animation: badge-danger 1s infinite;
}
@keyframes badge-danger {
    0%   {background-color: #d9534f;}
    30%   {background-color: #d9534f;}
    100% {background-color: #ccc;}
}

/* Buttons */
.btn { border-radius: 0; }

/* Forms */
.tempedit, .cke_textarea_inline { 
    width: 100%;
    height:100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.cke_top {
    border-bottom: 1px solid #b6b6b6;
    padding: 6px 8px 2px;
    white-space: normal;
    box-shadow: 0 1px 0 #fff inset;
}
.cke_wordcount .cke_path_item {
    display: block;
    float: right;
    margin-top: 2px;
    margin-right: 3px;
    color: #000;
    background-color: #ff9db2;
    border-radius: 3px;
    border: 1px solid #ff6b8a;
    padding:3px 5px;
    box-shadow: 0px 1px 1px #fff;
}

/* Panels */
.panel {
    border-radius: 0;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.panel-heading input, .panel-heading select, .panel-heading select option {
    color: #000;
}

/* Tabs */
.scrollbar {
    position:relative;
    z-index:1;
    width:80%;
}
#leftscroll, #rightscroll {
    position:absolute;
    height: 40px;
    width:40px;
    background-color: rgba(0,0,0,0.8);
    color:#fff;
    text-align:center;
    line-height: 40px;
    cursor: pointer;
    display:none;
}
#leftscroll:hover, #rightscroll:hover {
    background-color: rgba(0,0,0,1);
    color:#fff;
    text-align:center;
    line-height: 40px;
    cursor: pointer;
    display:none;
}
#leftscroll {
    left:0;
    top:0;
    border-top-left-radius: 6px;
}
#rightscroll {
    right:0;
    top:0;
    border-top-right-radius: 6px;
}
#tablist {
    position:relative;
    width:80%;
    height:40px;
    float:left;
    overflow-y:hidden;
    overflow-x:hidden;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
}
#tablist ul {
    /*max-width:100%;*/
    position:absolute;
    top:0;
    left:0;
    height:40px;
    float:left;
    white-space: nowrap;
}
#tablist ul li {
    float:none;
    display:inline-block;
}
#tablist ul li a {
    float:left;
}

.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover,
.nav-tabs>li>a,
.nav-tabs>li>a:hover {
    border: 0px !important;
}
.nav-tabs.nav-pills {
    border-bottom: 0px;
}
.nav-tabs>li>a,
.nav-tabs>li>a:hover {
    background-color: #444d58;
    white-space: nowrap;
}
.nav-tabs.nav-pills>li {
    margin-bottom: 0px;
}
.nav-tabs.nav-pills > li > a {
    border-radius: 4px 4px 0 0;
}
.tab-content {
    background-image: url('images/loading.gif');
    background-repeat:no-repeat;
    background-position: center 50px;
}
.tab-pane .panel {
    z-index:1;
}

/* Template / Worksheet Page setup */
.a4width {
    width:100%;
    height:30px;
}
.a4wrapper {
    position: relative;
    display:block;
    background-color:#fff;
    border: 1px solid #ccc;
    width:100%;
}
/* 
* Paragraph setup 
* - left and right margin = 10% = 21mm
* - top and bottom margin = 7% = 20.79mm
* - col1 = width: 80% = 168mm
* - col2 = width: 35% = 73.5mm
* - row3 = height: 24% = 71.28mm
*/
.a4fullpage {
    position: absolute;
    left:10%;
    top:7%;
    display:block;
    width: 80%;
    height: 86%;
    background-color: #fff;   
    border-radius: 4px;
    overflow: hidden;
}
.a4col1row3 {
    position: absolute;
    display:block;
    width: 80%;
    height: 24%;
    background-color: #fff;   
    border-radius: 4px;
    overflow: hidden;
}
.a4col1row2 {
    position: absolute;
    display:block;
    width: 80%;
    height: 39%;
    background-color: #fff;   
    border-radius: 4px;
    overflow: hidden;
}
.a4col2row3 {
    position: absolute;
    display:block;
    width: 35%;
    height: 24%;
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.col2row3lefttop { top: 7%; left:10%;}
.col2row3righttop { top: 7%; right:10%;}

.col2row3leftcenter { top: 38%; left:10%;}
.col2row3rightcenter { top: 38%; right:10%;}

.col1row2top { top: 7%; left:10%;}
.col1row2bottom { top: 53%; left:10%;}

.col1row3top { top: 7%; left:10%;}
.col1row3center { top: 38%; left:10%;}
.col1row3bottom { top: 69%; left:10%;}

.imgedit {
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}
#template-print .imgedit {
    border: 0px solid #ccc;
}
.modetext { text-transform: capitalize;}

.imgformat-1, .imgformat-2, .imgformat-3, .imgformat-4, .imgformatwork-1, .imgformatwork-2 {
    width: 210px;
    height: 297px;
    background-color: #ccc;
    border-radius: 3px;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.6);
    background-repeat: no-repeat;
    background-size: cover;
}
.imgformat-1 {
    background-image: url('images/format1.png');
}
.imgformat-2 {
    background-image: url('images/format2.png');
}
.imgformat-3 {
    background-image: url('images/format3.png');
}
.imgformat-4 {
    background-image: url('images/format4.png');
}
.imgformatwork-1 {
    background-image: url('images/format5.png');  
}
.imgformatwork-2 {
    background-image: url('images/format4.png');    
}
/* Modals */

.modal-dialog {
    width: 1170px;
    padding-left:15px;
    padding-right: 15px;
}
@media (min-width: 1200px)
.modal-dialog {
    width: 1170px;
}
@media (min-width: 992px)
.modal-dialog{
    width: 970px;
}
@media (min-width: 768px)
.modal-dialog {
    width: 750px;
}
/* Footer */

#footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background-color: #2b3643;
    color:#fff;
    font-size:10px;
    line-height:20px;
}

#console-debug {
    position:absolute;
    top:140px;
    left:20px;
    right:50%;
    bottom:20px;
    z-index:99;

    display:none;

    background:#eee;
    box-shadow: 0px 0px 20px #000;

    padding:20px;
    white-space: nowrap;

    overflow-y: scroll;
    
}





#mobilemenu { display:none; }

/* Media Queries */
@media(max-width:767px) {
    #mobilemenu { 
        display:inline; }
    .mobilehide { display:none !important; }
    .nav-top-row {
        position:fixed;
        z-index:99999;
        background-color: #eee;
        width:100%;
    }
    .top-nav {
        float:right;
        display: inline;
    }
    .btn-mobile {
        color: #fff !important;
        background-color: #337ab7;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
        line-height: 20px;
        display: inline;
    }
    .btn-mobile + .dropdown-menu {
        left:auto;
        right:0 !important;
    }

    .logintitle { margin: 20px auto; }
    #mainnav { 
        display:none;
        position:absolute;
        top:80px; 
        left:0;
        right:0;
        z-index:999;
    }    
    #mainnav li { 
        display: block;
        float:none;
    }
    #mainnav li .dropdown-menu { 
        display: block;
        float:none;
        position:relative;
    }
    #mainnav li .dropdown-menu > .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 0;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }
    .headfixed {
        width:auto;
        padding-bottom:30px;
        background-attachment: fixed;
    }
}
@media print {
    .no-print, .back-to-top, #footer { display:none !important;}
    .page-break { page-break-after: always; }
    .page-break:last-child, .page-break-last { page-break-after: avoid; }
    .a4wrapper { border: 0px; font-size: 8.3pt; height: 250mm !important;}
    .a4wrapper::after { content: 'Copyright - Futureminds 2016';position:absolute; bottom:-10mm;z-index: 99;}
    /* 
    * Paragraph setup 
    * - left and right margin = 10% = 21mm
    * - top and bottom margin = 7% = 20.79mm
    * - col1 = width: 80% = 168mm
    * - col2 = width: 35% = 73.5mm
    * - row3 = height: 24% = 71.28mm
    */
    .a4fullpage {left:0%;top:0%;width: 100%;height: 100%;}    
    .a4col1row2 {width: 100%; height: 47%;}
    .a4col1row3 {width: 100%;height: 31%;}
    .a4col2row3 {width: 45%;height: 31%;}

    .col2row3lefttop { top: 0%; left:0%;}
    .col2row3righttop { top: 0%; right:0%;}

    .col2row3leftcenter { top: 36%; left:0%;}
    .col2row3rightcenter { top: 36%; right:0%;}

    .col1row2top { top: 0%; left:0%;}
    .col1row2bottom { top: 53%; left:0%;}

    .col1row3top { top: 0%; left:0%;}
    .col1row3center { top: 36%; left:0%;}
    .col1row3bottom { top: 71%; left:0%;}
}