﻿/*----------
  Reset Part
  ---------*/
/*========== font source=========*/
@font-face {
    font-family: 'open_sansbold';
    src: url('../fonts/opensans-bold-webfont.eot');
    src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-bold-webfont.woff2') format('woff2'), url('../fonts/opensans-bold-webfont.woff') format('woff'), url('../fonts/opensans-bold-webfont.ttf') format('truetype'), url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/opensans-light-webfont.eot');
    src: url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-light-webfont.woff2') format('woff2'), url('../fonts/opensans-light-webfont.woff') format('woff'), url('../fonts/opensans-light-webfont.ttf') format('truetype'), url('../fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('../fonts/opensans-semibold-webfont.eot');
    src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-semibold-webfont.woff2') format('woff2'), url('../fonts/opensans-semibold-webfont.woff') format('woff'), url('../fonts/opensans-semibold-webfont.ttf') format('truetype'), url('../fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-regular-webfont.woff2') format('woff2'), url('../fonts/opensans-regular-webfont.woff') format('woff'), url('../fonts/opensans-regular-webfont.ttf') format('truetype'), url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: 400;
    font-style: normal;
}




















  

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: auto;
    background: transparent;
}
body {
    line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
nav ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
/* change colours to suit your needs */

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}
/* change colours to suit your needs */

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* change border colour to suit your needs */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}
/*-------------------------------
 Theme for Anger Management Admin
---------------------------------*/

html {
    overflow-y: scroll
}
body, html {
    height: 100%;
    min-height: 100%
}
body {
    background: #fff url(images/bg-body.gif) left top repeat-x
}
body, input, select, textarea {
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size: .85em;
    color: #000;
}
a {
    color: #f10025;
        color: #2b7f54;
}
a:link {
    text-decoration: none;
}
a:hover {
    /*text-decoration: underline;*/
}
p, ul {
    margin-bottom: 15px;
    line-height: 1.6em;
}
h1, h2, h3, h4, table, form {
    margin-bottom: 15px
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em
}
h3 {
    font-size: 1.2em;
}
h4 {
    font-size: 1.1em;
}
.titleBar {
    background: #000;
    color: #fff;
    margin-bottom: 0;
    font-size: 1.2em;
    font-weight: normal;
    height: 36px;
    line-height: 35px;
    padding: 0 10px
}
.wrapper, nav, footer {
    width: 980px;
    margin: 0 auto !important;
}
header {
    background: #000;
    overflow: hidden;
    margin-bottom: 15px;
    height: 81px;
}
header .wrapper {
    position: relative;
}
header h1 {
    float: left;
   /* text-indent: -9999px;*/
/*    overflow: hidden;*/
    width: 351px;
    height: 41px;
    /*background: url(images/logo.jpg) left top no-repeat;*/
    margin: 24px 0 19px;
    color:#fff;
}
header h1 a{color:#fff; 
    position: relative;
    left:68px;
    vertical-align: middle;
    padding-top: 5px;


}

header h1 a:hover{color:#fff; text-decoration: none;}


header h1 a:before{

content: "";
background: url(snorkel_facebook.png) no-repeat;
width: 133px;
height: 72px;
position: absolute;
left:-89px;
top: -10px;
background-size:124px;

}





#main {
    padding: 20px 20px 5px 20px;
    background-color: #fff;
}
footer {
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
}
nav ul {
    position: relative;
    text-align: left;
}
nav ul li {
    display: inline;
    margin-right: 5px;
    list-style: none;
        font-family: 'open_sanslight', sans-serif;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
}
nav ul li a {
    color: #fff;
    padding: 0 8px;
    font-size: 1.1em;
    font-weight: bold
}
nav ul li a:hover, nav ul li a:active, nav ul li.selected a {
    color: #f86600;
    text-decoration: underline
}
#loginNav {
    float: right;
    width: 570px;
    margin-top: 33px;
}
.loggedinText {
    float: left;
    color: #f86600;
    font-weight: bold;
    font-size: 1.2em;
}
.loginBtn {
    float: right;
}
/*-------
  Buttons
  -------*/

.loginBtn, .btnSmall, .btnSmallWithEvent, .btnSmallReset {
    background: #7da939!important;
    color: #fff;
    display: block;
    height: 19px;
    line-height: 18px;
    padding: 0 20px!important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 0!important;
    font-size: 1em!important;
    cursor: pointer;
  
    position: relative;
}
.loginBtn:hover, .btnSmall:hover, .btnSmallWithEvent:hover, .btnSmallReset:hover {
    background-image: none!important;
    text-decoration: none
}
.btnLarge {
    background: #42913c!important;
    color: #fff;
    display: inline-block;
    padding: 0 25px!important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 0!important;
    cursor: pointer;
    
    position: relative;
    font: bold 16px/26px arial;
}
.btnLarge:hover {
    background-image: none!important;
    text-decoration: none;
    background-color: #7da939 !important;
}
input.btnSmall, input.btnSmallWithEvent, input..btnSmallReset {
    line-height: 15px;
    padding-bottom: 4px;
}
.btnSmall, .btnSmallWithEvent, .btnSmallReset .btnSmall span, .btnSmallWithEvent span, .btnSmallReset span {
    font-family: "Trebuchet MS", Verdana!important;
}
.btnSmall span, .btnSmallWithEvent span, .btnSmallReset span {
    padding: 0!important;
    line-height: 18px!important;
    color: #fff!important;
}
.btnRemove {
    float: right;
    margin-right: 304px;
}
/*-----------
  Fomr Layout   
------------*/

form ul {
    list-style: none;
    margin: 0;
    padding: 0
}
fieldset ul {
    margin-top: 15px;
}
form ul li {
    margin: 0 0 7px 0;
    padding: 0;
    overflow: hidden
}
form ul li label {
    display: block;
    float: left;
    width: 100px;
    text-align: right;
    padding-right: 5px;
}
form .newUserForm ul li label {
    width: 115px;
}
form .templateForm li label, form .periodList li label {
    width: 140px;
}
form .editSettingForm li label, form .reflectionForm li label {
    width: 180px;
}
form .practiceForm li label {
    width: 360px;
}
form .templateForm li .btnRadio label, form .practiceForm li .btnRadio label, form .reflectionForm li .btnRadio label {
    width: auto
}
form .templateForm li .btnRadio input, form .practiceForm li .btnRadio input, form .reflectionForm li .btnRadio input {
    float: left;
}
form .checkBox label {
    text-align: left;
}
fieldset {
    /*border: 1px solid #ddd;*/
    padding: 0 15px 15px 15px;
    margin: 0 0 1.5em 0;
    overflow:inherit;
}
legend {
    font-size: 1.2em;
    font-weight: bold;
}
/*textarea                {min-height: 75px;}*/

textarea {
    min-height: 25px;
}
select {
/*    width: 200px;*/
/*    width: 300px;
    padding: 6px 12px!impo;*/
}
input[type="text"], input[type="password"], input[type="number"] {
    border: 1px solid #ccc;
    padding: 6px 12px!important;
    /*width: 200px;*/
    width: 300px;
    height: 20px;
    line-height: 30px;
    float: left;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

select.form-control{width: 300px;}

/*.form-horizontal .control-label{padding-top: 0px;}*/


select {
    border: 1px solid #ccc;
    padding: 6px 12px;
    width: 300px;
  -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
border-radius: 4px;
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;

}
input[type="submit"], input[type="checkbox"] {
    float: left;
}
.reminderList label {
    width: 150px
}
input[type="text"].txtDate {
    width: 100px;
    margin-right: 5px;
}
input[type="text"].txtTime {
    width: 60px
}
.ui-datepicker-trigger {
    float: left;
    border: 0;
    cursor: pointer;
    margin-top: 4px;
    margin-right: 5px;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
    overflow: hidden;
    background: url(images/icon-calender.png) no-repeat
}
div.time-picker {
    width: 4.7em!important;
}
/*-----
  Pages
  -----*/

.titleBar .btnSmall {
    font-size: 14px!important;
    display: inline-block;
    margin-left: 50px
}
#main.addUserForm, #main.addForm {
    padding-bottom: 20px;
    overflow: hidden;
}
.addUserForm .btnSmall {
    float: left;
}
.group .btnSmall {
    float: none;
    display: inline-block;
}
.selectList {
    float: right;
    margin-top: -35px;
    position: relative;
}
.linkEdit, .linkDelete, .lnkDelete, .linkInfo, .linkEditUser,.linkActivate,.linkDeactivate {
    display: block;
    float: left;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    overflow: hidden;
    text-indent: -999px;
}

.linkActivate {
    background: url(images/circle_check.png) left top no-repeat;

}

.linkDeactivate {
    background: url(images/circle_check_active.png) left top no-repeat;

}

.linkEditUser {
    background: url(images/icon-edit-user.gif) left top no-repeat;
}
.linkEdit {
    background: url(images/icon-edit.png) left top no-repeat;
}
.linkInfo {
    background: url(images/icon-info.png) left top no-repeat;
}
.linkDelete, .lnkDelete {
    background: url(images/icon-delete.png) left top no-repeat;
}
.cleditorMain {
    float: left;
    margin: 10px 0
}
#HomeworkContentDetail {
    margin-bottom: 10px;
}
.clsDivOrder {
    float: left;
    width: 135px;
    padding: 5px 10px 0 0;
    text-align: right;
}
.linkAdd {
    color: blue;
    float: left;
    margin-right: -100px;
    /*margin-top: -34px;*/
    margin-bottom: 10px;
}
.editorList {
    overflow: hidden
}
/*#progress {
    margin-left: 140px;
}*/

.period {
    float: left;
    margin-right: 5px;
    height: 11px;
    border: 1px solid #000;
    border-right: 0;
    width: 184px;
    background: url(images/bg-period-default.gif) left top repeat-x
}
.period div {
    height: 11px;
    background: url(images/bg-period-status.gif) left top repeat-x
}
.actions {
    overflow: hidden
}
.actions input, .actions .btnSmall {
    margin-right: 5px;
    display: inline-block;
}
.ui-widget {
    font-size: 1em!important;
}
.ui-dialog form {
    overflow: hidden
}
.ui-dialog .ui-dialog-content {
    padding: 10px 0 0 0!important
}
.ui-dialog .ui-dialog-content table {
    margin-bottom: 0
}
#patientList tr td {
    cursor: pointer
}
.meetingList, #NewMeetingContent {
    margin-bottom: 10px;
}
.divMeeting {
    margin-bottom: 5px;
    overflow: hidden;
}
.meetingList label {
    display: inline-block;
    float: left;
    padding-right: 5px;
    text-align: right;
    width: 195px;
    line-height: 25px
}
.datePnl {
    overflow: hidden;
    margin-bottom: 5px;
}
/*-----
  Table
-------*/

table.itemList {
    border-collapse: collapse;
    width: 100%;
}
table.itemList table {
    margin: 0
}
table.itemList td, table.itemList th {
    padding: 0 10px;
    height: 35px;
    vertical-align: middle
}
table.itemList td td {
    vertical-align: top;
    padding: 0
}
table.itemList th {
    text-align: left;
    background-color: #a6a6a6;
    font-weight: normal;
    font-size: 0.9em;
}
table.itemList .even td, table.itemList th {
    background-color: #a6a6a6;
}
table.itemList .odd td {
    background-color: #bfbfbf
}
table.itemList tr:hover td {
    background-color: #b3b3b3
}
#main table .odd td {
    background: #f2f2f2
}
#main table .even td, #main table th {
    background: #d9d9d9
}
#main table .even:hover td {
    background: #e7e6e6
}
#main table .odd:hover td {
    background: #fcfcfc
}
table td.innerTable {
    padding: 10px;
}
table .innerTable table {
    position: relative;
}
table td.innerTable, table tr:hover td.innerTable, table .innerTable table td {
    height: auto;
    background: #d9d9d9!important
}
table td td.innerTableTitle {
    padding: 5px 10px;
    background: #000!important;
    color: #fff
}
table td td.innerTableContent {
    width: 304px;
    background: #fff!important;
    padding: 10px;
}
table td td.innerTableContent p {
    margin-bottom: 7px;
}
.innerTableContent .btnSmall {
    display: inline-block;
    margin-bottom: 7px;
}
#patientList tr td td {
    cursor: default;
}
/*------------------
  validation helpers
  ------------------*/

.field-validation-error {
    color: #ff0000;
}
.field-validation-valid {
    display: none;
}
.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}
.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}
.validation-summary-valid {
    display: none;
}
.validation-summary-errors ul li {
    list-style: none;
}
/*------
  Custom
  ------*/

.Hidden {
    display: none;
}
#progress {
    display: none;
}
/*----
  Misc 
  ----*/

.clear {
    clear: both;
}
.left {
    float: left;
}
.right {
    float: right
}
.error {
    color: red;
}
/*----
Expand/collapse
----*/

.expand {
    background: url(images/expand.png) no-repeat 100% 50%;
}
.collapse {
    background: url(images/collapse.png) no-repeat 100% 50%;
}
.titleBar .linkBack {
    float: right;
}
.progreesInMid {
    left: 50%;
    margin-left: -75px;
    position: absolute;
    top: 200px;
    width: 150px;
}
.btnSmall {
    display: inline-block;
}
.titleBar .right {
    margin: 10px 0 0 0;
}
.tabCreate {
    float: left;
    width: 460px;
}
.tabCreate table tr:hover td {
    background: none !important;
}
.plus_style {
    background: red;
}
ul li span.plus_style {
    background: url(images/add.png) no-repeat 100% 50% red;
}
ul li span.minus_style {
    background: url(images/remove.png) no-repeat 100% 50% green;
}
.up, .down {
    float: left;
    width: 16px;
    height: 16px;
    overflow: hidden;
}
.actions .linkAdd {
    float: inherit;
}
.btnRemove {
    float: left;
    margin: 5px 0 0 0;
}
.tooltip {
    padding-left: 5px;
}
.qtipContent, .qtipoverallTextContent {
    display: none;
    padding: 10px 0 0 0;
}
.qtip-content {
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    font-size: 12px;
    color: #000;
}
.qtip-content ol {
    padding: 10px 0 0 30px;
}
.qtip-content li {
    margin-bottom: 3px;
    line-height: 16px;
}
.qtip-content ul {
    padding: 5px 0
}
.qtip-content ul li {
    list-style-type: circle;
    list-style-position: inside;
}
.divPracticeDateTime {
    overflow: hidden;
}
#NewSingleReminderContent form, #NewFeedbackContent form {
    margin: 0 0 7px 0;
    clear: both
}
.divFeedback select {
    float: left
}
.editorList .linkAdd {
    margin: 0 0 0 410px;
}
#btnAddSaveHomeworkTemplate {
    margin-right: 0!important
}
#NewFeedbackContent form {
    overflow: hidden;
}
.divFeedback .linkAdd, .divPracticeDateTime .linkAdd {
    margin-bottom: 0;
}
#NewMeetingContent form div {
    margin: 0
}
#NewMeetingContent form {
    overflow: hidden;
    margin-bottom: 5px;
}
.divMeeting .linkAdd {
    margin: 4px 0 0 0;
}
.addForm {
    position: relative;
}
#overallTextDiv {
    position: absolute;
    right: 30px;
    top: 40px;
    width: 276px;
    background: #fffec8;
    border: 1px solid #e5e29f;
    color: #87832a;
}
#overallTextDiv div {
    padding: 10px;
    font: 13px/18px arial, Helvetica, Sans-Serif;
}
#overallTextDiv div .overallTextHeading {
    padding-bottom: 3px;
    border-bottom: 1px solid #aaa;
    display: block;
    font-weight: bold;
    margin: 0 0 0 0;
    font-size: 15px;
}
#SelectedHomework {
    float: left;
    margin: 0 5px 0 0
}
.hName a {
    color: #000000;
}
#btnAddHomework {
    margin-bottom: 15px
}
.gift span, .innerTableContent span {
    background: #f00;
    color: #fff!important;
    padding: 0px 5px;
}
#txtOverallDescription {
    width: 100%;
    margin-top: 15px;
}
#divTraining, #divHomework, #divReminders, #divPracticeFeedback {
    float: left;
    width: 100%;
}
#divHomework > h2.titleBar + input.btnSmall {
    margin-bottom: 5px;
}
#divHomework > h2.titleBar + input.btnSmall + br + input[type="checkbox"] {
    margin-right: 5px;
}
.btnRadio {
    float: left
}
.btnRadio input[type="radio"] {
    margin: 5px 5px 5px 0;
}
.relativeclass, #topoftemplate, #bottomoftemplate {
    position: relative;
}
#topoftemplate, #bottomoftemplate {
    width: 100%;
    float: left;
}
#topoftemplate ul.templateForm {
    width: 660px;
    float: left;
}
#topoftemplate ul li {
    margin-bottom: 20px;
    margin-top: 10px;
}
#topoftemplate ul li label {
    width: 150px;
    min-width: 150px;
}
#topoftemplate #overallTextDiv {
    position: relative;
    float: right;
    top: 10px;
    right: 0;
}
table.itemList {
    margin-top: 15px;
}
#HomeworkContentDetail {
    margin-top: 20px;
    width: 640px;
    float: left;
    min-height: 200px;
}
#HomeworkContentDetail {
    margin-top: 20px;
}
.cls-reorder {
    background: #FAFAFA;
    width: 100%;
    float: left;
    border-bottom: 1px solid #ddd;
    color: #444;
    z-index: 2;
    display: block;
    padding: 16px;
    /*padding-top:0;*/
    font-size: 16px;
}
.clsDivOrder {
    width: 20px;
    margin-right: 15px;
}
.editorList {
    /*padding:20px 10px;
  background: #fafafa;
  margin-bottom: 20px;*/
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #cccccc;
    margin-bottom: 20px;
    padding: 20px 10px;
}
#HomeworkContentDetail .tabCreate, #HomeworkContentDetail .tabCreate>input[type="text"] {
    width: 560px!important;
}
#HomeworkContentDetail .editorList div.clear+label {
    padding-left: 40px;
    margin-right: 0;
    margin-top: 10px;
    width: 100%;
}
#HomeworkContentDetail .editorList div.clear+label+a.linkAdd {
    margin-left: 20px;
}
#HomeworkContentDetail .editorList .tabCreate+img+div.clear+label+a.linkAdd {
    margin-left: 33px;
}
.righside.hanged {
    position: absolute;
    /*right: 40px;*/
    right: -15px;
    top: 10px;
}
.fixedblock {
    position: fixed;
}
.relativeclass .righside.hanged {
    /*width: 236px;*/
    width: 320px;
}
.thisislink a.linkAdd {
    -webkit-border-radius: 6px!important;
    border-radius: 6px!important;
    border-color: #145fd7!important;
    /*background-color: #4a87ee;*/
    color: #fff;
    background-image: url('images/blue_btn_stripe@2x.png')!important;
    background-repeat: repeat-x!important;
    background-position: center bottom!important;
    background-color: #2260dd!important;
    -webkit-background-size: 1px 32px;
    -moz-background-size: 1px 32px;
    background-size: 1px 32px;
}
div[data-type="dynamic-button"] {
    margin-bottom: 40px;
    width: 100%;
    float: left;
}
#HomeworkContentDetail div[data-type="dynamic-button"] + a.linkAdd {
    /*margin-left: 35px;*/
}
div[data-type="dynamic-button"] + a.linkAdd + br {
    display: none!important;
}
div[data-type="dynamic-button"] + a.linkAdd + br + br + a.linkAdd {
    float: right;
    margin-right: 25px;
    background-color: #BF0000!important;
}
.cls-dynamic-button+.cls-dynamic-button {
    margin-top: 15px;
}
.cls-dynamic-button > a.linkAdd {
    float: right;
    margin-top: 20px;
    margin-right: 25px;
}
.cls-dynamic-button > input {
    /*width: 240px;*/
    width: 150px;
}
#txtButtonLabel,input[id*="txtButtonLabel-"] {
    -webkit-border-radius: 6px!important;
    border-radius: 6px!important;
    border-color: #145fd7!important;
    /*background-color: #4a87ee;*/
    color: #fff;
    background-image: url('images/blue_btn_stripe@2x.png')!important;
    background-repeat: repeat-x!important;
    background-position: center bottom!important;
    background-color: #2260dd!important;
    -webkit-background-size: 1px 32px;
    -moz-background-size: 1px 32px;
    background-size: 1px 32px;
    font-size: 16px;
    line-height: 28px;
    min-height: 32px;
}
a.remove.linkAdd {
    background-color: #BF0000!important;
}

a.remove.linkAdd:hover {
    background-color: #CC0000!important;
}
.cls-reorder, .cls-dynamic-button {
    position: relative;
}
.cls-reorder input {
    width: 100%;
    margin-top: 5px;
}
.cls-reorder input+a.linkAdd.remove, .cls-dynamic-button input+a.linkAdd.remove {
    margin-top: 15px;
    float: right;
    text-indent: -300px;
    overflow: hidden;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background-color: #BF0000!important;
    position: absolute;
    top: 28px;
    right: 5px;
}
.cls-reorder input+a.linkAdd.remove:after, .cls-dynamic-button input+a.linkAdd.remove:after {
    color: #fff;
    content: " - ";
    float: left;
    font-size: 40px;
    height: 32px;
    position: absolute;
    right: 0px;
    text-indent: 10px;
    top: -5px;
    width: 32px;
    z-index: 9999;
}
.cls-reorder input+a.linkAdd, .cls-dynamic-button input+a.linkAdd {
    border: 0!important;
}
.cls-dynamic-button input+a.linkAdd.remove {
    top: -15px;
    margin-right: -5px;
}
div[data-type="reorder"] {
    margin-bottom: 15px;
    width: 100%;
    float: left;
}
a.linkAdd+a.linkAdd.remove {
    float: right
}
div.editorList textarea {
    border: 1px solid #999;
    width: 100%
}
/*textarea#Homework_Description{
  width: 480px!important;
}
*/

textarea {
    border: 1px solid #CCC;
    padding: 5px;
    width: 300px;
    min-height: 100px;
}
div#delete-dialog {
    display: inline-block;
}
iframe#iframePreview {
    position: fixed;
    top: 200px;
    /*right:0;*/
    z-index: 999;
    /*background: url("images/iphone.png") no-repeat;*/
    /*padding:50px 30px 150px;*/
    /*width:380px;*/
    /*height: 792px*/
}
.absoluteclass {
    position: absolute;
}
.righside.hanged.bottom {
    bottom: 0;
    top: auto;
    position: fixed;
    height: 50px;
    background: #eee;
    right: 0;
    left: 0;
    z-index: 1000;
}
.righside.hanged.bottom .fixedblock {
    margin: 0 auto;
    width: 980px;
    position: relative;
    top: 10px;
}
.righside.hanged.bottom .fixedblock .thisislink {
    width: auto;
    float: left;
}
.righside.hanged.bottom .fixedblock .thisislink a.linkAdd {
    float: left;
    display: block;
    margin-right: 10px;
}
#overallTextDetails .tabCreate {
    margin: 15px 0
}
ul.templateForm li textarea {
    width: 200px!important;
    height: 70px!important;
}
ul.templateForm li select {
    width: 200px!important;
}
ul.templateForm li .dynamic-feedback select {
    width: 50px!important;
}
#main.addUserForm, #main.addForm {
    padding-bottom: 0;
    margin-top: -12px;
}
#insideIframe #divTraining, #insideIframe #divHomework {
    max-height: 370px;
    margin: 10px 0 15px;
    overflow: auto;
    oveflow-x: hidden;
}
#tblPractices, #tblHomeworks {
    margin-top: 0
}
#insideIframe br {
    display: none;
}
#btnClose {
    position: absolute;
    border-radius: 22px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;
    width: 44px;
    height: 44px;
    right: -22px;
    top: -22px;
    background-image: url("images/opacity30.png");
    background-color: #BF0000;
    color: #FFF;
    font-weight: 700;
    font-size: 25px;
    border: 0;
    cursor: pointer;
    /*text-indent: -33em;*/
}
#btnClose:hover, #btnClose:active {
    background-image: none;
}
fieldset#savingall {
    border: 0;
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
}
fieldset#savingall .withborder {
    border: 1px solid #ddd;
    margin: 0 0 1.5em;
    padding: 15px 15px;
    float: left;
    width: 100%;
}
fieldset#savingall .withborder select {
    width: 200px !important;
    float: right;
}
fieldset#savingall div.actions button.btnSmall, button.redbtn {
    font-size: 20px!important;
    /*background: #BF0000!important;*/
    background: #015A44!important;
    padding: 5px 20px!important;
    height: auto!important;
    margin: 10px 0;
}
fieldset#savingall div.actions button.btnSmall:hover, fieldset#savingall div.actions button.btnSmall:active, button.redbtn:active, button.redbtn:hover {
    background:  #014434!important;
}
#tblTaskAdmin {
    border: 1px solid #EEE;
}
fieldset#savingall .withborder h2.titleBar {
    margin-bottom: 5px;
}
.fixedheight {
    max-height: 600px;
    margin: 5px 0 30px;
    overflow: auto;
    overflow-x: hidden;
}
.fixedheight table {
    margin: 0
}
#main table#tblPraticeAssignments tr td, 
#main table#tblPracticeAssignment tr td, 
#main table#myDataTable tr td ,
#main table#tblHomework tr td
{
    background-color: #fff;
}
#main table#tblPraticeAssignments tr.even td,
#main table#tblHomework tr.even td,
#main table#tblPracticeAssignment tr.even td,
 #main table#myDataTable tr.even td {
    background-color: #f5f5f5;
}
#main table#tblPraticeAssignments tr td.ddown, 
#main table#myDataTable tr td.ddown,
#main table#tblHomework tr td.ddown,
#main table#tblPracticeAssignment tr td.ddown,
 .sortable .cls-reorder, .clsContent.ui-sortable-handle {
    background-image: url("images/up_down_icon@2x.png")!important;
    background-repeat: no-repeat;
    background-position: 98% center;
    background-size: 15px auto;
    -webkit-background-size: 15px auto;
    -moz-background-size: 15px auto;
}
.clsContent.ui-sortable-handle {
    padding:10px 30px 10px 20px;
    border-bottom:1px solid #ccc;
}
.sortable .cls-reorder {
    background-position: 98% 10px;
}

#formbox .tabCreate span.cke_skin_kama{
    /*border:2px solid #E8C1A6;
    background: #FFFEF3;
    padding:20px;*/
}

#tblPractices_filter label input[type="text"]{
    float: none;
}


/*reminder css*/
.clsFeedbacks,.clsReminders {
    width:100%;
    float:left;
    padding-bottom:8px;
}

input.smallinput {
    width: 50px;
    float:left!important
}
.small {
    float:left;
    width: 60px;
    line-height: 32px;
    text-align:center;
}
.clsReminders .small {
    width:auto;
    margin:0 10px
}
a.linkAdd.smalll {
float:right!important;
margin:0!important;
font-size: 13px !important;
line-height: 28px;
}
select.fleft {
    float:left !important;
    width: 150px!important;
    margin-right: 15px!important
}
.static-box {
    display:flex;
}
.btnSmall:disabled,
.btnLarge:disabled {
    opacity:.6;
}

/*============ css table data=============*/


table.dataTable {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}
table.dataTable table {
    margin: 0
}
table.dataTable td, table.dataTable th {
    padding: 0 10px;
    height: 35px;
    vertical-align: middle
}
table.dataTable td  {
    vertical-align: top;
    padding: 0;
    border:1px solid #ccc;
}
table.dataTable th {
    text-align: left;
    background-color: #fff ;
    font-weight: normal;
    font-size: 0.9em;
}
table.dataTable .even td, table.dataTable th {
    background-color: #fff;
}
table.dataTable .odd td {
    background-color: #F0F0F0;
    white-space: nowrap;
}
table.dataTable tr:hover td {
    background-color: #F7F7F7
}

.dataTable thead:first-child tr:first-child td { background: red;}





a.delet, a.edit, .edit-dtl a{
    -webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
background: #A05730;
color:#fff;
padding: 4px 12px;
font-size: 11px;
margin: 0px 12px;
    background: #55bd82;

}
a.delet, .edit-dtl a:last-child{background:#AE0000 !important;}

a.edit, .edit-dtl a{ background: #A05730; background: #d8ac41;     background: #55bd82;}


.titlepage{

    color: #A05730;
    font-size: 20px;
    font-weight: 300;
    height: auto;
    margin-bottom: 15px;
    padding: 5px;
    width: 100%;
    text-align: right;
    font-family: 'open_sansregular', sans-serif;

}

    .titlepage a{ 
     background: #DDAB00;
     background: #57bd81;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 14px;
    padding: 5px 7px;}

    .titlepage a:hover{text-decoration: none; background: #A05730; background: #347d54; }

    .edit-dtl{}

    #menutable_paginate{ margin-top:15px; text-align: right;}

    a.paginate_disabled_previous, a.paginate_disabled_next, .paginate_enabled_previous, .paginate_enabled_next{
    border: 1px solid #ccc;
    border-radius: 10px;
      -webkit-border-radius: 10px;
-moz-border-radius:10px;
    padding: 5px 7px;
    text-transform: uppercase;
    font-weight: 700;
    margin-right: 15px;
    color: #A05730;
    
}
a.paginate_disabled_previous, a.paginate_disabled_next {
    cursor:not-allowed;
    color: #c0c0c0;
}
a.paginate_enabled_next, a.paginate_enabled_previous {
     color: #307e54;
     border: 1px solid #307e54;
}
a.paginate_disabled_previous:hover, a.paginate_disabled_next:hover, a.paginate_enabled_next:hover, a.paginate_enabled_previous:hover{

    text-decoration: none;
}

a.paginate_enabled_previous , a.paginate_enabled_next{
cursor: pointer;
}
a.paginate_enabled_previous{
    margin-right:8px
}
a.paginate_disabled_next{
margin:0!important;

}

.dataTables_info{width: 200px; float: left;}
.sorting{ font-weight: 700!important;}

.tabel-header{ background: #A05730; color:#fff;}
.tblbgimg{ background: #A05730!important; color:#fff!important; font-size: 14px!important; font-weight: 400!important;font-family: 'open_sansregular', sans-serif;}
.wrapper h2{margin-top: 20px; color: #A05730; color: #307e54; font-family: 'open_sansregular', sans-serif; font-weight: 400;}

.form-horizontal{width: 100%; float: left; border:1px solid #eee; padding: 10px; margin-top: 20px;}
.form-horizontal .control-label{text-align: left; font-weight:500;}
.btn.submit-btn, .btn-save{
    background: #A05730; 
    color: #fff; 
    border:1px solid #8E4E2B;
    background: #41a26b;
    border: 1px solid #307e54;}

.btn.submit-btn:hover, .btn-save:hover{
    background: #BF9500; 
    color: #fff; 
    border:1px solid #BF9500;
    background: #307e54;
    border: 1px solid #307e54;
}

.back{

    float: left;
    width: 100%;
    margin-top: 20px;
}
.back a{
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    color: #A05730;
    font-weight: 700;
    margin-right: 15px;
    padding: 5px 20px;
    text-transform: uppercase;
    position: relative;
    text-align: center;
    font-family: 'open_sansregular', sans-serif;
    font-weight: 400;
    color: #307e54;


}

.back a:before{
content: "«";
position: absolute;
left: 5px; top: 3px;
font-size: 18px;

}


.selectbgimg{
  background: #DDAB00;
    border: 1px solid #EEEEEE;
     border-radius: 5px;
      -webkit-border-radius: 5px;
-moz-border-radius:5px;
    color: #4A3900;
    padding: 5px 7px;

    background: #55bd82;
    border: 1px solid #307e54;
    color: #fff;
    display: inline-block;

}

#mydropzone{margin-top: 0!important; width: 700px; margin-left: 165px; overflow: hidden;}
.dz-details{text-align: center;}

#bgimagePreview{padding-top: 10px;}

/*#mydropzone a.btn-danger{display: inline; margin-top: 20px;}*/


.tblbgimg {
    background: #307e54 !important;
}