@import "variables.less";

html, body { height: 100%; }
body {
    background: #ccc; color: @dark; font-family: @mainFont; font-weight: 300; font-size: 18px; margin: 0; padding: 0; overflow: hidden;
}

h1, h2, h3, h4 { margin: 0; font-family: @mainFont; font-weight: 400; }
h1 { font-size: 28px; margin-bottom: 15px; }
h2 { font-size: 28px; margin-bottom: 20px; }
h3 { font-size: 20px; margin-bottom: 15px; color:@primary; }
a { color: @primary; text-decoration: none; cursor: pointer; }
.small { font-size: 12px; }
input:focus, button:focus, .editor:focus, textarea:focus { outline: none; }
img { border: none; }
p { margin: 0 0 20px 0; }
.label { color: @dark; display: inline; padding: 0; font-size: 100%; font-weight: 300; line-height: inherit; text-align: left; border-radius: 0; }
.right { float: right; }
.left { float: left; }
.textRight { text-align: right; }
.saveForm { display: none; margin-bottom: 20px; }

.superadmin { display: none; }
.strong{font-weight:bold;}
.google { background: #df4a32 !important; color: #fff; border-bottom: 3px #a43d2c solid; }

#ForgotPassword {
	#FPStepCode, #FPStepPassword { display: none; border:none; }
}


#ManageProfile {
	.row { margin-bottom: 15px; }
}

#loginPage {
	input[type="checkbox"] { width: auto; margin-right: 5px; }
	label { font-weight: 300; }
}

#header {
    background: #fff; padding: 10px 20px; border-bottom: solid 1px @dark; 
    #logo { 
        display: inline-block; vertical-align: top; width: 400px;
        img { height: 60px; width: auto; }
    }
    #topMenu { 
        display: inline-block; text-align: right; float: right; margin-top: 20px; 
        a { margin-right: 10px; }
    }
}

 .gridHeader { 
    background: @secondaryLight !important; color: #fff; font-size: 12px !important; text-transform: uppercase; font-weight: 700; padding: 3px 15px !important; 
    &:hover { background: @secondaryLight !important; }
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
  }

.ui-accordion-header { background: none; }
.ui-accordion-content { padding: 5px !important; }

#schoolName, #districtInfo, #salesRepInfo { 
	cursor: pointer; display: inline-block; color: @secondary; vertical-align: middle; font-weight: 400; margin-right: 20px;
	i { font-size: 14px; }
}

#sideMenu { 
    background: @dark; width: 15%; max-width: 300px; float: left; overflow: auto;
    .content { margin-top: 10px; }
    .menuItem { color: @primary; background: #fff; margin-bottom: 5px; cursor: pointer;  }
    .menuItem > a { text-decoration:none; color: @primary; }
    i { margin-right: 10px; }
    .header { padding: 10px; font-size: 16px; font-family: @mainFont; }
    .active, .active > a {
        color: #fff;
        .header { background: @primary;  }
    }
    .emphasis { color: @primary; font-size: 16px; }
    a { color: @dark; }
    .sub {
        background: #f5f5f5; border-bottom: solid 2px #222; color: @dark;
        a { padding: 15px; display: block; width: 100%;  }
        a:hover { background: #fff; text-decoration: none; }
    }

    #menuModuleList .item:first-child { border-top: solid 2px @error; }
}
#siteWrapper { 
    background: #fff; width: 84%; float: left; overflow: auto; margin: .5%;
    .content {  padding: 20px; }
}

.textBtn { color: @secondaryLight; text-transform: uppercase; font-weight: 400; cursor: pointer; }

.sortList, .list {
    padding: 0; margin: 0;  
    > .row { background: #fafafa; list-style: none; padding: 15px; margin: 0; font-size:16px; line-height: 20px; }
    > .row:nth-child(even) {background: #eee;}
    > .row:nth-child(odd) {background: #fafafa;}
    .fa { color: @primary; margin-right: 10px; font-size: 18px; cursor: pointer; line-height: 20px; vertical-align: top; }
    .alt { background: #f5f5f5; }
    .hover, > .row:hover { background: @hover;  }
    .sortIcon { cursor: move; font-size: 16px;}
    .controlsIcon { font-size: 16px; }
    .actions {  text-align: right; display: none;  }
    .deleteIcon { }
    .placeholder { background: #fffee0; border: solid 2px #fffb81; list-style: none; height: 50px; }

    .active, .active:hover { background: rgba(64,173,77,.2) !important; font-weight: 700; padding: 15px 15px 0; }
    .subwrapper { padding: 0; }
    .sublist { 
        background: #fff; margin-top: 15px; display: none; margin-left: -15px; margin-right: -15px; font-weight: 300;

        > .row { background: #fafafa; list-style: none; padding: 15px; margin: 0; font-size:16px; line-height: 20px; }
        > .row:nth-child(even) {background: #e2edf6;}
        > .row:nth-child(odd) {background: #fff;}
        .hover, > .row:hover { background: #fcfbef;  }
        .itemActive { background: #faf8dd !important; font-weight: 700; }

        .title { padding-left: 80px; }
        .fa { text-align: center; }
    }

    .projectItem { cursor: pointer; }

    .subheader { 
        margin-top: 5px !important; background: #fff; color: @secondary; text-transform: uppercase; font-size: 14px !important; font-weight: 500; padding: 10px 15px !important;  
        &:hover { background: none !important; }

        .name { padding-left: 80px; }
    }
}

.lbl { font-size: 12px; font-weight: 400; text-transform: uppercase; }
.statusBox {
    -webkit-transition: all .3s ease-in-out;  -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
    color: #fff; text-align: center; padding: 20px; position: fixed; bottom: -80px; width: 100%; z-index: 99999;
}
.editArea {display:none;}
.updateForm {  display: none; margin-bottom:20px; background:#f5f5f5; padding: 15px; }


#errorBox { background: @error; border-top: solid 1px red; }
#successBox { background: @primary; border-top: solid 1px @primaryLight; }
#loader { display: none; position: fixed; top: 30px; left: 400px; z-index:10; }
#overlay { display:none; position: absolute; top: 0; left: 0; background:rgba(0,0,0,.7); z-index: 100; width: 100%; height: 100%; }

#confirm, #cloneDialog {
    -webkit-transition: all .3s ease-in-out;  -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; 
    background: @secondary; width: 100%; position: absolute; z-index: 200; color: #fff; top: -400px; 
	border-top: solid 1px @dark; border-bottom: solid 1px @dark;
    .content { width: 700px; margin: 0 auto; padding: 40px; line-height: 24px; }
    button { background: @secondaryLight; border-color: @secondaryDark; }
}

.formRow { margin-bottom: 20px; }
.label { display: inline-block; vertical-align: top; width: 180px; margin-top: 14px; }
input, textarea { font-family: @mainFont; font-size: 16px; font-weight: 300; padding: 8px; border: solid 1px #ccc; width: 100%; border-radius: 6px; background: #fafafa; }
input:focus, textarea:focus { border-color: @primary; background: #fff; }
button { background: @primary; color: #fff; border: none; cursor: pointer; text-align: center; border-bottom: solid 3px @primaryDark; padding: 7px 10px; font-size: 14px; font-weight:400; font-family: @mainFont; border-radius: 6px; }
.button { background: @secondaryLight; float: left; color: #fff; border: none; cursor: pointer; text-align: center; border-bottom: solid 3px @primaryDark; padding: 7px 10px; font-size: 14px; font-weight:400; font-family: @mainFont; border-radius: 6px; }
.greyButton { background: #ccc; color: #555; border-bottom: solid 3px #aaa; }
.topButton { font-size: 18px; padding-bottom: 5px; margin-top: 3px; }
.orangeButton { background: @warning; border-bottom: solid 3px @warningDark; color: #fff; }

.activeUser { color: forestgreen !important; }
.inactiveUser { color: #aaa !important; }

@import "admin.less";
@import "dashboard.less";
@import "book.less";
@import "slidecheckbox.less";
@import "dropdown.less";
@import "favorite.less";
@import "student.less";
@import "teacher.less";
@import "creator.less";
@import "tags.less";
@import "importStudent.less";

@import "devexpress.less";
@import "wishlist.less";
@import "brainhive.less";
@import "dropdownMS.less";