/*==============================================
=============== Open-Sans Fonts ==============
==============================================*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,600,700);
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400,300,600,700);

/*==============================================
================= Header Style ===============
==============================================*/

.wrap {

    background: #f1f1f1;

}

.wrap .container {

    padding-top: 140px;

}

.footer a {
    color: #90969E;
}

.footer {

    height: 90px;
    margin-top: -70px;
    position: relative;
    background-color: #363b42;
    font-size: 0.32em;
    padding: 1.5em 2.2em;
    color: #666666;
    padding-top: 3em;
    font-family: Raleway;
    font-weight: 400;
}

.content-container {

    display: -webkit-flex;
    display: flex;
    background: transparent;
    padding: 30px;
    padding-top: 0px;
    flex-wrap: wrap
}

.logout-icon a {

    color: # #00b6ff;
    padding-left: 10px;
    display: block;
    background: transparent;
    border-left: 1px solid #ccc;
}

.logout-icon a:hover {

    color: #009fde;

}

.flex-white {

    background: #fff;
    padding: 0px;
    padding-bottom: 0px;
    border: 1px solid #cccccc;
    margin: 12px;
    border-radius: 5px;
    min-height: 250px;
    min-width: 246px;

}

.menu-option1 {

    -webkit-flex: initial;
    flex: initial;
    min-width: 515px;
    position: relative;

}

.menu-option1:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/uploadtext.svg');
    position: absolute;
    left: -180px;
    top: 110px;
}

.menu-option2 {

    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 228px;

}

.inner-section-flex {

    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 228px;
    padding: 0px 30px;

}

.inner-section-content {

    -webkit-flex: 1;
    flex: 1;
    text-align: center;

}

.inner-section-content.alone {

    padding-top: 25px;

}

.inner-section-middle {

    font-size: 18px;
    font-family: raleway;
    font-weight: 600;

}

.btn-transparent {
    padding: 25px 25px;
    transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -webkit-transition: all .35s ease-in-out;
    position: relative;
}

.btn-transparent.small-padding {
    padding: 20px;

}

.btn.btn-transparent.small-padding:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/profileicon.svg');
    opacity: 1;
}

.btn.btn-transparent.small-padding:hover:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/profileicon.svg');
    opacity: 0;
}

.btn.btn-transparent.small-padding:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/profileiconhover.svg');
    opacity: 0;
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
}

.btn.btn-transparent.small-padding:hover:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/profileiconhover.svg');
    opacity: 1;
    position: absolute;

}

.btn-transparent.small-padding .border-btn-rounded {

    margin-top: 5px;

}

.btn.btn-transparent.supportdesk:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/supportdeskicon.svg');
    opacity: 1;
}

.btn.btn-transparent.supportdesk:hover:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/supportdeskicon.svg');
    opacity: 0;
}

.btn.btn-transparent.supportdesk:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/supportdeskiconhover.svg');
    opacity: 0;
    position: absolute;
    left: 0;
    top: 20px;
    width: 100%;
}

.btn.btn-transparent.supportdesk:hover:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/supportdeskiconhover.svg');
    opacity: 1;
    position: absolute;

}

.alone .btn-transparent:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/salescopiesicon.svg');
    opacity: 1;
}

.alone .btn-transparent:hover:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/salescopiesicon.svg');
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    opacity: 0;

}

.alone .btn-transparent:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/salescopiesiconhover.svg');
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
}

.alone .btn-transparent:hover:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/salescopiesiconhover.svg');
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    opacity: 1;

}

.menu-option3 .alone .btn-transparent:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/newprojecticon.svg');
    opacity: 0.8;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

.menu-option3 .alone .btn-transparent:hover {

    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    opacity: 1;
}

.menu-option3 .alone .btn-transparent:hover:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/newprojecticon.svg');
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    opacity: 1;

}

.menu-option3 .alone .btn-transparent:after {

    display: none;
}

.menu-option3 .alone .btn-transparent {

    padding: 10px 25px;
    color: #808080;
    opacity: 0.9;
    padding-top: 20px;
}

.menu-option3 .alone {

    padding-top: 0px !important;

}

#clickToBrowseUpload:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/cloudupload.svg');
    opacity: 1;
}

#clickToBrowseUpload:hover:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/cloudupload.svg');
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    opacity: 0;

}

#clickToBrowseSubmit {

    background: #9acb22;
    border: 1px solid #9acb22;
    border-radius: 33px;
    font-family: raleway;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 15px;

}

#clickToBrowseUpload:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/clouduploadhover.svg');
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;

}

#clickToBrowseUpload:hover:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/clouduploadhover.svg');
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    opacity: 1;

}

.btn-transparent p {
    font-size: 16px;
    font-family: 'Crimson Text', serif;;
    line-height: 20px;

}

.btn-transparent:hover {

    color: #575757;
    transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -webkit-transition: all .35s ease-in-out;

}

.btn-monthly-transparent p {
    font-size: 16px;
    font-family: 'Crimson Text', serif;;
    line-height: 20px;

}

.btn-monthly-transparent:hover {

    color: #575757;
    transition: all .35s ease-in-out;
    -moz-transition: all .35s ease-in-out;
    -webkit-transition: all .35s ease-in-out;

}

.button-title {

    font-size: 15px !important;
    font-family: raleway !important;
    font-weight: 600 !important;
    padding-top: 15px;
    margin-bottom: 10px;
    color: #808080;

}

.blue-btn-pro {

    display: block !important;
    background: #00b6ff !important;
    color: #fff !important;
    font-size: 15px !important;
    padding: 12px 55px 14px 55px !important;
    border-radius: 50px !important;
    font-family: Raleway !important;
    font-weight: 600 !important;
    margin: 15px auto !important;

}

.border-btn-rounded {

    display: block;
    background: #f2f2f2;
    color: #808080;
    font-size: 15px;
    padding: 10px 20px 13px 20px;
    border-radius: 50px;
    margin-top: 25px;
    border: 1px solid #cccccc;
    min-width: 150px;

}

h2 {
    margin-top: 20px !important;
    margin-bottom: 0px !important;
}

.menu-option1 h2 {

    font-size: 15px !important;
    font-family: Raleway !important;
    font-weight: 600 !important;
    padding: 0px 10px 18px 30px !important;
    border-bottom: 1px solid #e6e6e6 !important;

}

.menu-option2 {

    -webkit-flex: initial;
    flex: initial;
    min-width: 246px;

}

.menu-transparent-option.fixed-height {

    -webkit-flex: initial;
    flex: initial;
    min-width: 246px;
    background: transparent;
    height: 250px;
    box-shadow: none;
    padding: 15px 15px;
    border: none;
    position: relative;
}

.menu-transparent-option.fixed-height:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/fbgrouptext.svg');
    position: absolute;
    top: 85px;
    right: -20px;

}

.menu-option2.fixed-height {

    height: 250px;

}

.last-option.monthly-box {

    -webkit-flex: initial;
    flex: initial;

    -webkit-align-items: left;
    align-items: left;
    -webkit-justify-content: top;
    justify-content: top;
    width: 246px;
    padding-bottom: 40px;
    background: transparent;
    border: none;
}

.last-option h2 {

    font-size: 15px;
    font-family: Raleway;
    font-weight: 600;
    padding: 0px 10px 18px 30px;
    border-bottom: 1px solid #e6e6e6;
    width: 100%;
    margin-bottom: 0px;
}

.monthly-ul-buttons {

    list-style-type: none;
    padding-left: 0px !important;
    font-size: 16px;
    font-family: 'Crimson Text', serif;
    text-align: left;
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
    max-height: 350px;
    overflow: auto;

}

.monthly-ul-buttons li {

    padding: 10px 20px 10px 30px;
    border-bottom: 1px solid #e6e6e6;
}

.share-but {

    display: block;
    padding: 7px 30px 4px 20px;
    border: 1px solid #a8a8a8;
    color: #6b6b6b;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 50px;
    font-size: 13px;
    font-family: Raleway;
    font-weight: 600;
    text-align: left;
    background: transparent;
}

.share-but.logout:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/facebookicon.svg');
    content: url('/public/BaseCopyEngineApp/img/homepage/logouticon.svg');
    display: inline-block;
    float: left;
    margin-right: 10px;
}

.share-but.facebook:before {
    content: url('/public/BaseCopyEngineApp/img/homepage/facebookiconhover.svg');
    content: url('/public/BaseCopyEngineApp/img/homepage/facebookicon.svg');
    display: inline-block;
    float: left;
    margin-right: 10px;
}

.share-but.facebook:hover:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/facebookiconhover.svg');
    display: inline-block;
    float: left;
    margin-right: 10px;

}

.share-but:hover {

    border: 1px solid #00b6ff;
    color: #00b6ff;

}

.share-but.logout:hover:before {

    content: url('/public/BaseCopyEngineApp/img/homepage/logouticonhover.svg');
    display: inline-block;
    float: left;
    margin-right: 10px;

}

.last-option .inner-section-flex {

    padding: 0 !important;
    -webkit-align-items: inherit;
    align-items: inherit;
    align-items: inherit;
    -webkit-justify-content: inherit;
    justify-content: inherit;
}

.monthly-tools-list {

    color: #808080;

}

.monthly-tools-list:hover {

    color: #00b6ff;

}

.monthly-tools-list:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/downloadicon.svg');
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    float: right;
    margin-right: 0px;
    margin-top: 2px;

}

.monthly-tools-list:hover:after {

    content: url('/public/BaseCopyEngineApp/img/homepage/downloadiconhover.svg');
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    margin-top: 6px;

}

.monthly-banner {

    background-image: url('/public/BaseCopyEngineApp/img/homepage/monthlybannerbg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 290px;

}

.menu-option3 h2 {

    font-size: 14px;
    font-family: Raleway !important;
    font-weight: 600;
    padding: 0px 10px 18px 30px;
    border-bottom: 1px solid #e6e6e6;
}

}

.menu-option3 {

    -webkit-flex: initial;
    flex: initial;
    background: #38dfc1;
    min-width: 247px;

}

.page-title {

    display: block;
    float: left;
    font-family: Raleway;
    color: #afafaf;
    width: 100%;
    font-size: 13px;
    margin-bottom: 15px;
    padding-left: 65px;
    position: relative;
}

.page-title .flaticon {

    padding-right: 5px;

}

.page-title:after {

    content: url(/public/BaseCopyEngineApp/img/homepage/newscripttext.svg);
    position: absolute;
    right: 60px;
    top: -80px;

}

.logo-top-dashboard {

    display: block;

    width: 215px;
    height: 48px;
    margin: 0 auto;
    border-radius: 50px;
    padding-top: 4px;
    float: left;
    margin-top: 13px;
}

header .user-options {
    display: block;
    font-size: 13px;
    padding: 1.9em 2em 1.25em 0em;
    text-align: right;
    color: #a3a3a3;
    float: right;
    font-family: Raleway;
    font-weight: 600;

}

.user-options .login-text {

    font-family: 'Crimson Text', serif;;
    font-style: italic;
    font-weight: 400;
    color: #808080;
    margin-right: 15px;
    font-size: 15px;

}

.row-top-logo {

    background: #FFF;
    height: 75px;
    width: 1200px;
    margin: 0 auto;
}

.img-responsive.center {

    padding-top: 11px;

}

.btn-transparent {

    background: transparent;

}

.btn-monthly-transparent {

    background: transparent;
    padding-top: 55px;

}

/*==============================================
=============== General Classes ==============
==============================================*/
html, body {
    width: 100%;
    background: #f1f1f1;
    font-size: 1.581em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #808080;
    position: relative;
    margin: 0 auto;
    padding: 0px;
    line-height: 1.5;
    height: 100%;
    min-height: 700px;
}

a:hover, a:active, a:focus {
    outline: 0 !important;
    text-decoration: none;
    cursor: pointer;
}

.row {
    margin: 0 auto;
}

.null {
    padding: 0px;
}

a:hover {
    text-decoration: none;
}

.center {
    margin: 0 auto;
}

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

#child-li {
    display: none;
}

#tab-side {
    display: none;
    position: relative;
    z-index: -99;
}

.pl-5 {
    padding-right: 0.35em;
}

.pr-5 {
    padding-left: 0.35em;
}

.modal-body {
    padding: 35px;
}

.tooltip {
    z-index: 1050;
    position: absolute;
}

textarea:focus, input:focus {
    outline: 0;
}

/*==============================================
=========== Header Style (Top-Nav) ===========
==============================================*/
header {
    font-size: 1em;
    position: relative;
    background: #fff;
    border-bottom: 1px solid #d9d9d9;
}

header .logo img {
    box-shadow: -1px -1px 1px 1px #E7E9ED;
    display: inline-block;
    width: 2em;
    height: 2.025em;
}

header .operation-icons-left {
    padding: 0px;
    display: inline-block;
    list-style: none;
    margin-bottom: 0;
    min-height: 100%;
}

header .operation-icons-left li {
    display: inline-block;
    font-size: 0.5em;
    height: 100%;
}

header .operation-icons-left a li {
    color: #C5D0DE;
    padding: 1.27em 1em;
    position: relative;
    top: -0.07em;
    cursor: pointer;
    margin-bottom: -0.15em;
}

header .operation-icons-left a:hover li {
    border-top: 3px solid #00aaff;
    background-color: #f5f6f9;
    color: #9499A0;
    z-index: -1;
}

header .operation-icons-left a.active li {
    border-top: 3px solid #00aaff;
    background-color: #f5f6f9;
    color: #9499A0;
    z-index: -1;
    cursor: progress;
}

header .btn-green {
    padding: 0.7em 1.5em;
    font-size: 0.33em;
    margin: 1.1em 3em 0.2em;
    font-weight: 600;
    line-height: 1.5;
}

header .operation-icons-right {
    padding: 0px;
    display: inline-block;
    list-style: none;
}

header .operation-icons-right li {
    display: inline-block;
    font-size: 0.35em;
    border: 1px solid #CCD0D7;
    box-shadow: 0px 1px 3px 0px rgba(43, 51, 62, 0.04);
    border-radius: 4px;
    padding: 0.6em 0.8em;
    cursor: pointer;
    color: #9499A0;
}

header .operation-icons-right li a {
    color: #9499A0;
}

header .operation-icons-right li:hover {
    border-color: #70737A;
    box-shadow: 0px 1px 3px 0px rgba(112, 115, 122, 0.1);
    color: #70737A;
}

header .operation-icons-right li:hover a {
    color: #70737A;
}

header .operation-icons-right-2 {
    display: inline-block;
    list-style: outside none none;
    padding: 0.053em 0px 0px 0.8em;
}

header .operation-icons-right-2 li {
    display: inline-block;
    border: 1px solid #CCD0D7;
    box-shadow: 0px 1px 3px 0px rgba(43, 51, 62, 0.04);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.4em;
    padding: 0.42em 0.7em;
    color: #9499A0;
}

header .operation-icons-right-2 li i {
    margin-left: -1px;
}

header .operation-icons-right-2 li:hover {
    border-color: #70737A;
    box-shadow: 0px 1px 3px 0px rgba(112, 115, 122, 0.1);
    color: #70737A;
}

header .operation-icons-right-2 li a {
    color: #9499A0;
}

header .operation-icons-right-2 li:hover a {
    color: #70737A;
}

header .nav-2 {
    padding-right: 0;
}

/*==============================================
========= Header Style (Bottom-Nav) ==========
==============================================*/
header .bottom-nav {
    border-bottom: 1px solid #ccc;
    font-size: 0.5em;
    padding: 1em 0em 0.55em;
    transition: all ease 0.2s;
}

.bottom-nav.sticky {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 199;
    background: #fff;
}

header .menu-button {
    padding: 0em 0.55em;
    width: 2.5em;
    display: inline-block;
}

header .menu-button a {
    color: #9499A0;
    opacity: 0.8;
}

header .menu-button a:hover {
    opacity: 1;
}

header .app-name {
    font-weight: 400;
    color: #535961;
    font-size: 1.2em;
    margin-right: 1.1em;
}

header .screen-swicth {
    padding: 0px;
    display: inline-block;
}

header .screen-swicth li {
    list-style: none;
    display: inline-block;
    border: 1px solid #ccc;
    padding: 0.35em 0.6em 0.25em;
    margin-right: -0.3em;
    cursor: pointer;
}

header .screen-swicth li:hover {
    border-color: #70737A;
    box-shadow: 0px 1px 15px 0px rgba(112, 115, 122, 0.1);
    z-index: 999;
    position: relative;
}

header .screen-swicth li:hover a {
    color: #9499A0;
}

header .screen-swicth li:nth-child(1) {
    border-radius: 4px 0px 0px 4px;
}

header .screen-swicth li:nth-child(2) {
    border-radius: 0px 4px 4px 0px;
}

header .screen-swicth li a {
    color: #C5D0DE;
}

header .screen-swicth li a.active {
    color: #9499A0;
}

header .action-icons {
    padding: 0;
    display: inline-block;
    margin-right: 1em;
}

header .action-icons li {
    list-style: none;
    display: inline-block;
}

header .action-icons li a {
    color: #9499A0;
    padding: 0em 0.4em;
    opacity: 0.8;
}

header .action-icons li a:hover {
    opacity: 1;
}

header .bottom-nav button {
    font-size: 0.7em;
    display: inline-block;
    margin: 0;
    padding: 0.7em 1.2em;
    font-weight: 600;
}

header .bottom-nav .btn-green {
    padding: 0.6em 1.5em;
}

header .bnrs {
    padding-right: 2.5em;
    text-align: right;
}

.logo-2 {
    background-color: #333c48;
    padding: 0.57em 0em;
}

.logo-2 img {
    width: 2.56em;
}

/*==============================================
============== User-2 Style ==================
==============================================*/
.user-2 {
    font-weight: 400;
    font-size: 0.4em;
    padding: 1.4em 1em 0.5em;
}

.user-2 img {
    width: 6.2em;
}

.user-2 .user-name {
    margin: 0.7em auto 0.25em;
    font-size: 0.95em;
}

.user-2 .campaigns {
    font-weight: 300;
    color: #C5D0DE;
    font-size: 0.8em;
}

/*==============================================
============= dropdown Style =================
==============================================*/
.dropdown .dropdown-wrapper {
    padding: 0;
}

.dropdown .btn-dropdown {
    display: block;
    margin: 0px;
    background: #2B333E none repeat scroll 0% 0%;
    border: 1px solid #414C5B;
    border-radius: 3px;
    color: #A1ABB8;
    padding: 0.8em;
    font-weight: 400;
    transition: all 0.15s ease-in-out 0s;
    box-shadow: 0px 1px 3px 0px transparent inset;
    font-size: 0.3em;
    text-align: left;
}

.dropdown .btn-cpg::before {
    content: "\e5a9";
    font-family: "Flaticons Stroke";
    font-weight: normal;
    font-size: 1.2em;
    right: 0.5em;
    transition: all 0.2s ease-in-out 0s;
    position: absolute;
    color: #9699A0;
    top: 0.5em;
}

.dropdown i {
    display: inline-block;
    position: relative;
    right: 0;
}

.dropdown .btn-blue {
    vertical-align: text-top;
    max-width: 2.6em;
    width: 100%;
    text-align: center;
    padding: 0.5em 0em;
    max-height: 2.6em;
    height: 100%;
    font-size: 0.35em;
}

.dropdown .col-md-3.col-sm-4.col-xs-3.null {
    max-height: 0.98em;
    line-height: 1.44em;
}

.dropdown .campaign-select-menu {
    border: 1px solid #414C5B;
    background: #2B333E none repeat scroll 0% 0%;
    margin-top: 0.5em;
}

.dropdown .dropdown-menu > li > a {
    color: #A1ABB8;
    font-weight: 300;
    font-size: 0.9em;
    padding: 0.5em;
}

.dropdown .dropdown-menu > li > a:hover {
    background: #414C5B none repeat scroll 0% 0%;
    color: #FFF;
}

/*==============================================
============= Left-Nav Style =================
==============================================*/
.left-nav-list {
    font-size: 0.33em;
    text-transform: capitalize;
    padding: 1em 0;
    text-align: left;
    list-style: none;
    font-weight: 400;
}

.left-nav-list i {
    margin-right: 0.5em;
    font-size: 1.2em;
}

.left-nav-list li {
    padding: 0.8em;
    padding-left: 1.5em;
}

.left-nav-list a {
    color: #C5D0DE;
}

.left-nav-list a:hover {
    color: #fff;
}

.left-nav-list .left-sub-nav-list {
    padding: 0;
    list-style: none;
}

.left-nav-list .left-sub-nav-list li {
    font-size: 0.9em;
    padding: 1em 0.5em 0.5em 0.15em;
}

.left-nav-list li.active {
    border-left: 3px solid #00aaff;
    background: #222933 none repeat scroll 0% 0%;
    padding-left: 1.3em;
}

.left-nav-list li.active a {
    color: #fff;
}

.left-nav-list li.active .left-sub-nav-list a {
    color: #C5D0DE;
}

.left-nav-list li.active .left-sub-nav-list a:hover {
    color: #fff;
}

/*==============================================
============ Search-Nav Style ================
==============================================*/
.search-nav {
    font-size: 0.4em;
    font-weight: 400;
    padding: 1em;
}

.address-book {
    color: #535961;
    font-size: 1.1em;
    padding-top: 0.5em;
}

.address-book i {
    color: #9499A0;
    margin-right: 0.5em;
}

.address-book .badge {
    background-color: #FFF;
    border: 1px solid #CCD0D7;
    box-shadow: 0px 1px 3px 0px rgba(43, 51, 62, 0.04);
    padding: 1em 1.3em 1em 1.2em;
    color: #535961;
    border-radius: 40%;
    margin-left: 1em;
    position: relative;
    top: -0.26em;
    cursor: pointer;
}

.address-book .badge:hover {
    border-color: #70737A;
    box-shadow: 0px 1px 3px 0px rgba(112, 115, 122, 0.1);
    color: #70737A;
}

.search-bar span {
    color: #ccc;
}

.search-bar .input-group {
    width: 15em;
    position: relative;
    top: 0.3em;
}

.search-bar span, input {
    border: 0px;
    background: #fff;
    padding: 0.5em;
}

.search-bar input::-webkit-input-placeholder {
    color: #999;
}

.search-bar input:-moz-placeholder { /* Firefox 18- */
    color: #999;
}

.search-bar input::-moz-placeholder { /* Firefox 19+ */
    color: #999;
}

.search-bar input:-ms-input-placeholder {
    color: #999;
}

.search-bar button {
    font-weight: 600;
    font-size: 0.9em;
    padding: 0.7em 1.5em;
    position: relative;
    top: 0.2em;
}

/*==============================================
========== Contact-Profile Style =============
==============================================*/
.contact-profile {
    background-color: #fff;
    border: 1px solid #E7E9ED;
    border-radius: 3px;
    padding: 1.25em;
    margin: 1em 0;
}

.contact-profile i {
    color: #B9C3CF;
}

.contact-profile i:hover {
    color: #70737A;
}

.contact-profile img {
    width: 5.5em;
}

.contact-profile .user-name {
    margin: 1em auto 0.25em;
    font-size: 0.95em;
    font-weight: 600;
}

.contact-profile .campaigns {
    margin: 0.25em auto 0.25em;
    font-size: 0.95em;
    font-weight: 300;
    margin-bottom: 1em;
}

.contact-profile .social-tag {
    margin-top: 1em;
    width: 100%;
    clear: both;
}

.contact-profile .social-tag .social-tag-type {
    margin: 0;
    text-transform: uppercase;
    color: #BABDC0;
    font-size: 0.75em;
    font-weight: 400;
    letter-spacing: 0.07em;
}

.contact-profile .social-tag .social-tag-link {
    font-size: 0.8em;
}

/*==============================================
============ Pagination Style ================
==============================================*/
.pagination {
    margin-bottom: 0;
}

.pagination > li > a {
    padding: 0.5em 1em;
    margin-right: 0.35em;
    color: rgb(125, 132, 154);
    border: 1px solid #E7E9ED;
    border-radius: 3px;
}

.pagination > li > a:hover {
    background-color: #00aaff;
    color: #fff;
}

.pagination > li > a.active {
    background-color: #00aaff;
    color: #fff;
}

/*==============================================
========== Delete-Confirm Style ==============
==============================================*/
.delete {
    color: #fff;
    font-size: 0.38em;
    background-color: #FF6B5D;
    padding: 1.2em 2em 0.8em;
    display: none;
}

.delete .delete-conform {
    padding: 0;
}

.delete .delete-conform li {
    list-style: none;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.9em;
    padding: 0 0.7em;
}

.delete .delete-conform li a {
    color: rgba(255, 255, 255, 0.8);
}

.delete .delete-conform li a:hover {
    color: #fff;
}

.delete .strong {
    font-weight: 500;
}

/*==============================================
=========== Profile-Action Classes ===========
==============================================*/
.profile-actions-wrapper {
    background-color: #FFF;
    padding: 1.5em 1.5em 0.5em;
    font-size: 0.4em;
    width: 22em;
    position: absolute;
    z-index: 99;
    top: 5em;
    right: 1.5em;
    display: none;
    box-shadow: 0px 6px 10px 3px rgba(0, 0, 0, 0.1);
}

.profile-details {
    padding-bottom: 1em;
}

.profile-actions-wrapper img {
    display: inline-block;
    width: 5.2em;
    margin-right: 0.75em;
}

.profile-actions-wrapper .usernam {
    display: block;
    font-weight: 500;
    font-size: 0.95em;
    margin-bottom: 0em;
}

.profile-actions-wrapper .useremail {
    display: block;
    color: #9699A0;
    font-size: 0.85em;
    margin-bottom: 0.45em;
    font-weight: 400;
}

.profile-actions-wrapper .btn-profile {
    text-transform: uppercase;
    color: #fff;
    background-color: #0079C2;
    border-radius: 2px;
    font-size: 0.7em;
    padding: 0.65em 2em;
}

.profile-actions-wrapper .btn-profile:hover {
    background-color: #0072BB;
}

.profile-action ul {
    padding: 0;
    list-style: none;
    text-transform: uppercase;
}

.profile-action {
    padding: 0.5em 0 0;
}

.profile-action li {
    padding: 0.25em 0;
    font-size: 0.9em;
}

.profile-action li a {
    color: #9699A0;
}

.profile-action li a:hover {
    color: #70737A;
}

/*==============================================
=========== Create-Contact Classes ===========
==============================================*/
.contact-form {
    font-size: 0.4em;
}

.contact-form h1 {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 1.1em;
    margin-bottom: 1em;
}

.contact-form label, span.label {
    font-weight: 100;
    font-size: 0.8em;
    clear: both;
    color: #9699A0;
    font-weight: 300;
    margin: 1.1em 0 0.5em;
}

.contact-form input {
    width: 100%;
    padding: 1.4em 1em;
    border-radius: 2px;
    border: 1px solid #ccc;
    font-size: 0.75em;
}

.contact-form .pl-5 {
    padding-right: 0.35em;
}

.contact-form .pr-5 {
    padding-left: 0.35em;
}

.contact-form .useroptions {
    margin: 1em 0;
    padding: 0;
}

.contact-form input[type="checkbox"] {
    width: auto;
    position: absolute;
    left: -100em;
}

.contact-form .custom-checkbox {
    font-weight: 300;
    border-radius: 2px;
    text-align: center;
    width: 1.7em;
    height: 1.7em;
    padding: 0em;
    color: #00AAFF;
    cursor: pointer;
    font-size: 0.75em;
    display: inline-block;
    background-color: #00AAFF;
    border: 1px solid #00AAFF;
}

.contact-form .checked {
    color: #fff;
}

.contact-form img {
    display: inline-block;
    float: left;
    margin-right: 0.5em;
}

.contact-form .fileUpload {
    position: relative;
    overflow: hidden;
    margin-top: 2em;
}

.contact-form .fileUpload:hover {
    color: #575757;
}

.contact-form .fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.contact-form input[type="upload"] {
    border: 0px none;
    width: 11.5em;
    padding: 0px;
    color: #9699A0;
    float: right;
    margin-top: -3em;
    margin-right: -0.7em;
}

.contact-form .btn-blue {
    padding: 1em;
    font-weight: 500;
    margin-top: 1em;
}

/*==============================================
============ My-Campaigns Classes ============
==============================================*/
.my-campaigns {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.my-campaigns .info {
    padding: 1.5em 0;
}

.my-campaigns i {
    position: relative;
    top: -1px;
}

.my-campaigns h2 {
    font-weight: 300;
    font-size: 1.38em;
    text-transform: capitalize;
    margin: 10px 0;
}

.my-campaigns .btn-blue {
    font-weight: 600;
    font-size: 0.84em;
    padding: 0.7em 1.5em;
}

/*==============================================
============ Category-Table Classes ==========
==============================================*/
.categories-table {
    background: #fff;
    border-radius: 3px;
    padding: 0;
    margin-bottom: 2.5em;
}

.categories-table .category {
    padding: 1.3em 1.5em;
}

.categories-table .category::before {
    content: "\e5b3";
    font-family: "Flaticons Stroke";
    font-weight: normal;
    font-size: 1em;
    color: #D5DAE3;
    position: absolute;
    right: 1.5em;
    top: 1.9em;
    transition: all 0.2s ease-in-out 0s;
}

.categories-table .category:hover::before {
    right: 1.2em;
}

.categories-table .first.left {
    box-shadow: -1px 0px 0px 0px #E7E9ED inset, 0px 1px 0px 0px #E7E9ED inset, 0px -1px 0px 0px #E7E9ED inset, 1px 0px 0px 0px #E7E9ED inset;
    border-radius: 3px 0px 0px;
}

.categories-table .first.right {
    border-radius: 0px 3px 0px 0px;
    box-shadow: -1px 0px 0px 0px #E7E9ED inset, 0px 1px 0px 0px #E7E9ED inset, 0px -1px 0px 0px #E7E9ED inset;
}

.categories-table .left {
    box-shadow: -1px 0px 0px 0px #E7E9ED inset, 0px -1px 0px 0px #E7E9ED inset, 1px 0px 0px 0px #E7E9ED inset;
}

.categories-table .right {
    box-shadow: -1px 0px 0px 0px #E7E9ED inset, 0px -1px 0px 0px #E7E9ED inset;
}

.categories-table .last.left {
    border-radius: 0px 0px 0px 3px;
}

.categories-table .last.right {
    border-radius: 0px 0px 3px;
}

.categories-table h4 {
    padding-top: 1px;
    font-weight: 400;
    transition: all 0.1s ease-in-out 0s;
    color: #5B616A;
    font-size: 0.96em;
    margin: 0px;
}

.categories-table .category:hover h4 {
    color: #0697DF;
}

.categories-table p {
    opacity: 0.7;
    font-weight: 300;
    font-size: 0.75em;
    color: #5B616A;
    margin: 0px;
    padding-top: 2px;
}

/*==============================================
============ Question-row Classes ==========
==============================================*/
.com-questions .thead {
    background: #46505E none repeat scroll 0% 0%;
    border-radius: 3px 3px 0px 0px;
    padding: 1.1em 2em;
    color: #FFF;
    font-size: 0.8em;
    letter-spacing: 0.1px;
    text-transform: capitalize;
}

.com-questions .tbody {
    background: #fff none repeat scroll 0% 0%;
    padding: 0;
    border-radius: 0 0 3px 3px;
}

.com-questions .trow {
    padding: 1.1em 0px 1.1em 0.6em;
    box-shadow: -1px 0px 0px 0px #E7E9ED inset, 0px -1px 0px 0px #E7E9ED inset, 1px 0px 0px 0px #E7E9ED inset;
}

.com-questions .trow.last {
    border-radius: 0 0 3px 3px;
}

.com-questions .trow h4 {
    padding-top: 1px;
    font-weight: 400;
    transition: all 0.1s ease-in-out 0s;
    color: #5B616A;
    font-size: 0.96em;
    margin: 0px;
}

.com-questions .trow:hover h4 {
    color: #0697DF;
}

.com-questions p {
    opacity: 0.7;
    font-weight: 300;
    font-size: 0.75em;
    color: #5B616A;
    margin: 0px;
    padding-top: 2px;
}

.com-questions p span {
    opacity: 0.5;
}

.com-questions .answers {
    text-align: center;
    padding: 0px;
    margin: 0px;
    opacity: 0.8;
    font-weight: 300;
    font-size: 0.7em;
    color: #5B616A;
}

.com-questions .answers span {
    opacity: 0.89;
    font-weight: 300;
    font-size: 1.65em;
    color: #5B616A;
    display: block;
    padding: 0px;
    margin: -2px 0px -7px;
}

.com-questions .author img {
    float: left;
    padding-left: 0.5em;
    margin-right: 1em;
    width: 2.76em;
}

.com-questions .author .username {
    padding-top: 1px;
    font-weight: 300;
    font-size: 0.8em;
    color: #7A7D82;
}

.com-questions .author .time {
    opacity: 0.5;
    font-weight: 300;
    font-size: 0.75em;
    color: #5B616A;
}

/*==============================================
============ Recent-Activity Classes =========
==============================================*/
.recent-activity {
    background: #FFF none repeat scroll 0% 0%;
    box-shadow: -1px 0px 0px 0px #E7E9ED;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 0.4em;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100vh;
    display: block;
    bottom: 0;

}

.recent-activity .buttons {
    padding: 2em 1.25em;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.recent-activity .button-wrapper {
    padding: 0 0.7em;
    max-width: 8em;
}

.recent-activity .recent-button {
    padding: 1.4em 0px 1.8em;
    background: #FFF none repeat scroll 0% 0%;
    border: 1px solid #E0E3E9;
    box-shadow: 0px 1px 3px 0px rgba(43, 51, 62, 0.04);
    border-radius: 3px;
    position: relative;
    text-align: center;
    transition: all 0.2s ease-in-out 0s;
}

.recent-activity .recent-button:hover {
    border-color: #CCD2DD;
    box-shadow: 0px 1px 3px 0px rgba(43, 51, 62, 0.08);
}

.recent-activity .recent-button i {
    color: #0AF;
}

.recent-activity .recent-button p {
    margin: 0px;
    font-weight: 400;
    font-size: 0.8em;
    color: #5B616A;
}

.recent-activity h5 {
    font-size: 0.7em;
    color: #A6B0BE;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 2em 0.5em 1.5em 3em;
}

/*==============================================
============ Recent-questions Classes ========
==============================================*/
.recent-questions {
    list-style: none;
    padding: 0 2em;
    font-size: 0.98em;
}

.recent-questions a:hover h4 {
    color: #0697DF;
}

.recent-questions img {
    float: left;
    margin-right: 1em;
    width: 2.5em;
}

.recent-questions h4 {
    font-weight: 600;
    font-size: 0.85em;
    color: #545A63;
    transition: all 0.1s ease-in-out 0s;
    margin: 0 0 0.25em;
}

.recent-questions h4 span {
    opacity: 0.5;
    font-weight: 300;
    font-size: 0.85em;
    color: #5B616A;
    float: right;
}

.recent-questions p {
    font-weight: 300;
    font-size: 0.75em;
    color: #5B616A;
}

hr {
    margin: 1em 0 1em 3.5em;
}

.recent-questions p span {
    opacity: 0.7;
}

.recent-questions .btn-white {
    margin-top: 2em;
}

section.fixed-3 {
    position: fixed;
    top: 0;
    z-index: 99;
    right: 0;
    bottom: 0;
    height: 100%;
}

/*==============================================
=========== Ask-Question Style ===============
==============================================*/
#askQuestion {
    font-weight: 400;
}

#askQuestion h1 {
    font-weight: 600;
    font-size: 0.9em;
}

#askQuestion input, textarea {
    width: 100%;
    padding: 1.4em 1em;
    border-radius: 2px;
    border: 1px solid #CCC;
    font-size: 0.75em;
    resize: none;
    border-radius: 3px;
}

#askQuestion .drop-parent {
    cursor: pointer;
}

#askQuestion .drop-parent.btn {
    text-align: left;
    background-color: #fff;
    width: 100%;
    padding: 1.4em 1em;
    border-radius: 2px;
    border: 1px solid #CCC;
    font-size: 0.75em;
    resize: none;
    border-radius: 3px;
}

#askQuestion .drop-parent.btn:hover, .drop-parent.btn:focus, .drop-parent.btn:active {
    color: #575757;
}

#askQuestion .drop-parent::before {
    content: "\e5a9";
    font-family: "Flaticons Stroke";
    font-weight: normal;
    font-size: 1.2em;
    right: 2em;
    top: 3.8em;
    transition: all 0.2s ease-in-out 0s;
    position: absolute;
    color: #9699A0;
}

#askQuestion ul {
    border: 1px solid #ccc;
    box-shadow: 0px 1px 3px 0px rgba(43, 51, 62, 0.04);
    margin-top: 0.1em;
    border-radius: 0 0 4px 4px;
    position: absolute;
    width: 93%;
    z-index: 99;
    cursor: pointer;
    display: none;
}

#askQuestion li {
    list-style: none;
    font-size: 0.8em;
    padding: 0.2em 0.9em;
    background-color: #fff;
}

#askQuestion li:hover {
    background-color: #00AAFF;
    color: #fff;
}

/*==============================================
============== Contact Style =================
==============================================*/
.contact {
    background-color: #fff;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    border: 0;
    height: 100vh;
}

.contact .pl-5 {
    padding-right: 0.75em;
}

.contact .pr-5 {
    padding-left: 0.75em;
}

.contact h2 {
    font-weight: 400;
    text-transform: capitalize;
    font-size: 1.2em;
    margin: 0;
    padding: 1.5em 2.5em;
}

.contact input {
    width: 100%;
    font-weight: 400;
    font-size: 0.98em;
    padding: 0 0 1em;
    transition: all ease 0.2s;
    border: 0px;
    transition: all ease 0.3s;
    position: relative;
    z-index: 99;
    background: transparent;
    height: 3.5em;
}

.contact input:focus {
    box-shadow: 0px 1px 0px 0px #9699A0;
}

.contact button {
    margin-top: 2em;
    font-weight: 700;
    font-size: 0.8em;
    padding: 0.7em 1.5em 0.6em;
}

.contact button i {
    font-weight: 300;
    font-size: 1.3em;
}

.contact .feedback-form {
    padding: 1em 3em;
}

.contact p {
    padding: 1em 0;
    color: #868A90;
}

.contact label {
    height: 1.5em;
    font-weight: 400;
    margin-top: 1.5em;
    color: #868A90;
    padding: 0;
    margin-bottom: 0;
}

.contact label span {
    position: relative;
    top: 2.4em;
    padding: 0;
    transition: all ease 0.4s;
}

.contact span.label {
    color: #00AAFF;
    top: 0;
    height: 1.5em;
    font-weight: 600;
}

/*==============================================
================= Faq Style ==================
==============================================*/
.faq {
    background-color: #fff;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    border: 0;
}

.faq h2 {
    font-weight: 400;
    text-transform: capitalize;
    font-size: 1.2em;
    margin: 0;
    padding: 1.5em 2.5em;
    color: #575757;
}

.faq .btn-blue {
    margin: 1.5em 2.5em;
    padding: 0.7em 1.5em;
    font-weight: 700;
}

.question-tabs {
    padding: 1.5em 3em 4em;
    background: #F1F4F8;
}

.question-tabs .tabs-wrapper, .tabs {
    padding: 0;
}

.question-tabs h5 {
    color: #B4BECA;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.7em;
    letter-spacing: 0.25em;
    padding: 2em 0 4.5em;
}

.question-tabs h5.section-second {
    padding: 4em 0 3em;
}

.question-tabs .title {
    font-size: 0.99em;
    padding: 1.25em;
    cursor: pointer;
    margin-bottom: 0;
}

.question-tabs .title:hover {
    background-color: rgba(225, 225, 225, 0.15);
}

.question-tabs .details {
    color: #6E747D;
    font-size: 0.8em;
    padding: 0.75em 1.5em 1.5em;
    display: none;
}

/*==============================================
============== My-Files Style ================
==============================================*/
.my-files {
    background-color: #fff;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    border: 0;
}

.my-files .page-title {
    padding: 1.5em 2.7em;
    font-size: 1.1em;
}

.my-files .page-title i {
    opacity: 0.6;
    vertical-align: middle;
    margin-right: 0.75em;
    font-size: 0.95em;
}

.my-files .page-body {
    background-color: #f1f4f8;
    padding: 1.5em 3em;
}

.my-files .files-row {
    padding: 1em 0;
}

.my-files .upload {
    padding: 1.5em 0.5em 4.4em;
    text-align: center;
    border-radius: 3px;
}

.my-files .upload i {
    font-size: 4em;
    opacity: 0.4;
}

.my-files .upload p.file-drag {
    font-weight: 600;
    opacity: 0.6;
    margin: 0;
    font-size: 0.9em;
}

.my-files .upload p.or {
    font-weight: 600;
    font-size: 0.8em;
    opacity: 0.45;
}

.my-files .fileUpload {
    position: relative;
    overflow: hidden;
    border-radius: 100em;
    padding: 0.65em 2.25em;
    font-weight: 600;
    font-size: 0.85em;
}

.my-files .fileUpload span {
    opacity: 0.95;
}

.my-files .fileUpload:hover {
    color: #fff;
}

.my-files .fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.my-files .file-box {
    text-align: center;
    background-color: #fff;
    border-radius: 3px;
    padding: 0.5em;
    overflow: hidden;
    margin-bottom: 1.5em;
}

.my-files .img-wrapper {
    overflow: hidden;
    background: #f9f9f9;
    height: 182.25px;
    width: 100%;
}

.my-files .img-wrapper img {
    cursor: pointer;
    margin: 0 auto;
    vertical-align: middle;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.my-files .file-box .img-details {
    padding: 1em 0 0.8em;
    font-size: 1em;
}

.my-files .file-box .title {
    font-weight: 600;
    margin: 0;
}

.my-files .file-box .ext {
    font-size: 0.8em;
    opacity: 0.5;
    font-weight: 300;
}

.my-files .file-box .layer {
    background: rgba(43, 51, 62, 0.8);
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    cursor: pointer;
    padding: 1em;
    text-align: center;
    top: -100%;
    transition: all ease 0.7s;
}

.my-files .file-box .layer .circle {
    border-radius: 100%;
    height: 1.8em;
    width: 1.75em;
    color: transparent;
    font-size: 0.8em;
    text-align: center;
}

.my-files .file-box .layer .circle.checked {
    color: #fff;
    background: #00AAFF;
    border: 1px solid #00AAFF;
}

.my-files .file-box .layer .circle i {
    vertical-align: middle;
    left: -0.05em;
    position: relative;
}

.my-files .file-box .layer .options {
    color: #E7E9ED;
}

.my-files .file-box .layer .options-2 {
    display: none;
}

.my-files .file-box .layer .options, .options-2 {
    width: 40%;
    text-align: right;
}

.my-files .file-box .layer .options ul {
    margin: 0px;
    line-height: 0em;
    padding: 0.45em 0 0.55em;
}

.my-files .file-box .layer .options-2 ul {
    line-height: 0em;
    margin: 0;
    padding: 0.25em 0;
}

.my-files .file-box .layer .options li {
    height: 5px;
    width: 5px;
    background: #E7E9ED;
    list-style: none;
    display: inline-block;
    border-radius: 100%;
    margin-left: 5px;
}

.my-files .file-box .layer .options-2 li {
    list-style: none;
    display: inline-block;
    font-size: 0.9em;
    width: 1.15em;
    text-align: center;
}

.my-files .file-box .layer .options-2 li a {
    color: #E7E9ED;
}

.my-files .file-box .btn-layer {
    padding: 0.75em 2.5em;
    margin-top: 14%;
    vertical-align: middle;
}

.my-files .file-box .btn-layer:hover {
    background-color: rgba(225, 225, 225, 0.3);
}

.my-files .file-box .layer.hover {
    top: 0%;
}

.my-files .file-box .layer.hover-block {
    top: 0%;
}

.my-files .delete {
    padding: 1em 3em 0.6em;
    font-size: 1em;
}

/*==============================================
============== Option-bar Style ==============
==============================================*/
.option-bar {
    position: fixed;
    z-index: 1050;
    top: 0;
    right: 0;
    background-color: #fff;
    font-size: 0.43em;
    font-weight: 300;
    display: none;
}

.option-bar ul {
    margin-bottom: 1px;
    padding: 1em 2.25em 1.1em;
}

.option-bar ul .minus-circle {
    background-color: transparent;
    border-radius: 100%;
    text-align: center;
    font-size: 0.8em;
    padding: 0.35em 0.64em;
    color: #CCD0D7;
    cursor: pointer;
    margin-right: 0.75em;
}

.option-bar ul .minus-circle i {
    position: relative;
    top: 0.005em;
    left: -0.015em;
}

.option-bar ul .minus-circle.checked {
    color: #fff;
    background: #00AAFF;
    border: 1px solid #00AAFF;
    padding: 0.532em;
    border-radius: -1%;
}

.option-bar ul .minus-circle.checked:hover {
    color: #fff;
}

.option-bar ul li {
    list-style: outside none none;
    display: inline-block;
    border: 1px solid #CCD0D7;
    box-shadow: 0px 1px 3px 0px rgba(43, 51, 62, 0.04);
    padding: 0.45em 0.8em;
    border-spacing: 0px;
    margin-right: -0.32em;
    cursor: pointer;
    background: #f9f9f9;
}

.option-bar ul li:nth-child(2) {
    border-radius: 2px 0 0 2px;
}

.option-bar ul li:last-child {
    border-radius: 0 2px 2px 0;
}

.option-bar ul li:hover, .option-bar ul .minus-circle:hover {
    box-shadow: 0px 1px 3px 0px rgba(112, 115, 122, 0.1);
    color: #70737A;
}

.option-bar ul li:hover a {
    color: #70737A;
}

.option-bar ul li a {
    color: #ccc;
}

/*==============================================
============ Campaign-Form Style =============
==============================================*/
.campaign-form {
    background-color: #fff;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    border: 0;
    padding-bottom: 0.8em;
    border-radius: 5px;
}

.campaign-form h1 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.95em;
    margin: 0;
    padding: 1.5em 0em 0em;
}

.campaign-form input {
    width: 100%;
    font-weight: 400;
    font-size: 0.98em;
    padding: 0 0 1em;
    transition: all ease 0.2s;
    border: 0px;
    transition: all ease 0.3s;
    position: relative;
    z-index: 99;
    background: transparent;
    height: 3.5em;
}

.campaign-form input:focus {
    box-shadow: 0px 1px 0px 0px #9699A0;
}

.campaign-form .btn-blue {
    margin-top: 2em;
    font-weight: 600;
    font-size: 0.85em;
    padding: 1em 1.5em;
    width: 100%;
    text-align: center;
}

.campaign-form .feedback-form {
    padding: 1em 3em;
}

.campaign-form label {
    height: 1.5em;
    font-weight: 400;
    margin-top: 1.5em;
    color: #868A90;
    padding: 0;
    margin-bottom: 0;
}

.campaign-form label span {
    position: relative;
    top: 2.7em;
    padding: 0;
    transition: all ease 0.4s;
}

.campaign-form span.label {
    color: #00AAFF;
    top: 0;
    height: 1.5em;
    font-weight: 600;
}

/*==============================================
============== Left-Menu Style ===============
==============================================*/
.launcher-v2 {
    padding: 0;
}

.launcher-v2 .page-title {
    padding: 0.5em 0em 1.5em 2.45em;
    font-size: 1.2em;
}

.launcher-v2 .template-body {
    background-color: #f1f4f8;
    padding: 1em;
}

.launcher-v2 .menu-title {
    text-transform: uppercase;
    font-weight: 700;
    padding: 1.5em 2.1em;
    font-size: 0.9em;
    opacity: 1;
    color: #BAC1CB;
    margin: 0;
}

.launcher-v2 .left-menu ul {
    list-style: none;
    padding-left: 2em;
    font-size: 0.95em;
}

.launcher-v2 .left-menu li {
    padding: 0.5em 0;
    opacity: 0.8;
}

.launcher-v2 .left-menu li p {
    font-size: 0.88em;
    opacity: 0.9;
    padding-left: 2.25em;
    margin: 0;
}

.launcher-v2 .left-menu li:hover {
    opacity: 1;
}

.launcher-v2 .left-menu li:before {
    font-family: 'Flaticons Stroke';
    content: '\e3fc';
    opacity: 0.4;
    vertical-align: text-bottom;
    font-size: 1em;
    margin-right: 1em;
}

.launcher-v2 .left-menu li:hover:before {
    color: #00AAFF;
    opacity: 1;
}

.launcher-v2 .left-menu li a {
    color: #575757;
}

.launcher-v2 button.btn-green {
    margin-left: 2.2em;
    margin-top: 2em;
    font-size: 0.8em;
    font-weight: 600;
    padding: 0.85em 2em;
}

.launcher-v2 .btn-browse {
    width: 80%;
    padding: 0.9em 0;
    text-align: center;
    margin: 1em 2.15em 1em;
    font-size: 0.87em;
}

.my-files .launcher-v2 .btn-layer {
    margin-top: 43%;
    padding: 1em 3em;
}

.launcher-v2 .btn-download {
    padding: 0;
    text-align: center;
    position: absolute;
    font-size: 1em;
    right: 0.65em;
    bottom: 0.75em;
    max-height: 15%;
    max-width: 15%;
    width: 3em;
    height: 3em;
}

.launcher-v2 .btn-download i {
    padding: 0;
    font-size: 0.95em;
    position: relative;
    top: -0.1em;
}

.launcher-v2 .pagination {
    margin-bottom: 5em;
}

.launcher-v2 .course-details {
    text-align: left;
    padding: 0em 1.25em 1em;
}

.launcher-v2 .course-play {
    color: #fff;
    text-align: center;
    font-size: 3.5em;
    font-weight: 300;
}

.launcher-v2 .course-play .play-circle {
    border: 0.08em solid #fff;
    border-radius: 100%;
    height: 1.5em;
    width: 1.5em;
    text-align: center;
    margin: 0.5em auto 0;
}

.launcher-v2 .course-play .play-circle i {
    margin-left: 2px;
}

.launcher-v2 .course-details h2 {
    font-size: 1.1em;
}

.launcher-v2 .course-details p {
    font-size: 0.75em;
    opacity: 0.7;
}

.launcher-v2 .course-details button {
    width: 100%;
    padding: 0.85em 0;
    font-weight: 700;
    font-size: 0.85em;
    margin-top: 0.25em;
}

.launcher-v2 .course-details button i {
    margin-right: 0.25em;
}

/*==============================================
=========== Campaign-Page Classes ============
==============================================*/
.campaign-body {
    background: #F1F4F8;
    padding: 0em;
}

.campaign-body .four-options {
    padding: 0 3em;
    background: #F6F7FA;
}

.campaign-body .four-options .check {
    padding: 0;
    text-align: center;
    height: 100%;
    font-size: 1.2em;
}

.campaign-body .four-options .check i {
    vertical-align: middle;
}

.campaign-body .four-options .check i.flaticon.stroke.checkmark-2 {
    font-size: 0.85em;
    top: 0.1em;
    left: -0.02em;
    position: relative;
    color: #1BB934;
}

.campaign-body .four-options .detail {
    padding: 0;
}

.campaign-body .four-options .option {
    overflow: hidden;
    position: relative;
    padding: 1.25em 0;
    cursor: pointer;
    margin-right: -1px;
    margin-bottom: -1px;
    margin-top: -1px;
}

.campaign-body .four-options .option.white {
    background: #fff;
}

.campaign-body .four-options .option:hover {
    background: #00AAFF;
    color: #fff;
}

.campaign-body .four-options .option:hover .check i.flaticon.stroke.checkmark-2 {
    color: #fff;
}

.campaign-body .four-options .option h3 {
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 0.15em;
}

.campaign-body .four-options .option p {
    font-size: 0.8em;
    margin: 0;
    font-weight: 400;
    opacity: 0.6;
}

.campaign-body .campaign-list-wrapper {
    padding: 2em 3em;
}

.campaign-body .campaign-list-wrapper .campaign-list {
    background-color: #fff;
    margin-bottom: 2em;
    display: table;
}

.campaign-body .campaign-list-wrapper .campaign-list.green {
    background-color: #F4FAF8;
    color: rgb(138, 184, 163);
}

.campaign-body .campaign-list-wrapper .campaign-list .col-sm-1 {
    max-width: 3.5em;
}

.campaign-body .campaign-list-wrapper .campaign-list .check {
    text-align: center;
    height: 100%;
    font-size: 1.5em;
    padding: 3.4em 0;
    opacity: 0.4;
    display: table-cell;
    cursor: pointer;
}

.campaign-body .campaign-list-wrapper .campaign-list .detail {
    padding: 1.85em 5em 1.85em 2.2em;
}

.campaign-body .campaign-list-wrapper .campaign-list .detail button {
    border-radius: 50em;
    font-size: 0.9em;
    padding: 0.75em 2.5em;
    font-weight: 400;
    margin-top: 0.6em;
}

.campaign-body .campaign-list-wrapper .campaign-list h2 {
    font-size: 1.25em;
    margin: 0 0 0.5em;
}

.campaign-body .campaign-list-wrapper .campaign-list p {
    font-size: 0.95em;
    line-height: 1.5em;
    font-weight: 300;
    opacity: 0.7;
}

.campaign-body .campaign-list-preview {
    overflow: hidden;
    cursor: pointer;
}

.campaign-body .campaign-list-preview:hover .layer {
    top: 0%;
}

.campaign-body .campaign-list-preview .layer {
    background: rgba(43, 51, 62, 0.8);
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 2.3em 1em;
    text-align: center;
    top: -100%;
    transition: all ease 0.7s;
    color: #fff;
    z-index: 99;
    font-size: 2em;
    line-height: 14px;
}

.campaign-body .campaign-list-preview .layer span {
    text-transform: uppercase;
    opacity: 0.8;
    font-size: 0.4em;
    font-weight: 600;
    letter-spacing: 0.25em;
}

.campaign-body .campaign-list-wrapper button.btn-white {
    padding: 0.75em 1.5em;
    width: 8em;
    color: #575757;
}

.campaign-body .del h2, .del p {
    text-decoration: line-through;
}

/*==============================================
========== Community-Thread Classes ==========
==============================================*/
.community-thread-wrapper {
    background-color: #FFF;
    padding: 0px;
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    border: 0px none;
}

.community-title {
    font-size: 1em;
}

.community-title h2 {
    font-weight: 400;
    text-transform: capitalize;
    font-size: 1.2em;
    margin: 0px;
    padding: 1.5em 2.5em;
}

.community-title h2 i {
    opacity: 0.6;
    font-size: 0.85em;
    margin-right: 1.85em;
    font-weight: 300;
}

.community-thread {
    background: #F1F4F8;
    padding: 2.5em 3em;
}

.community-thread .profile-img {
    /*max-width: 96px;*/
    padding-left: 0;
}

.thread-wrapper h2 {
    font-size: 1.25em;
    font-weight: 400;
    margin-bottom: 0em;
}

.thread-wrapper .thread-admin {
    text-decoration: underline;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 0.8em;
    opacity: 0.7;
}

.thread-wrapper .thread-time {
    text-transform: none;
    font-size: 0.74em;
    opacity: 0.6;
    font-weight: 400;
    text-decoration: none;
}

.thread-wrapper .thread p {
    font-size: 0.95em;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 1.5em;
}

.thread-wrapper ul {
    margin-top: 1.5em;
}

.thread-wrapper ul li {
    list-style: none;
    display: inline-block;
    font-size: 0.75em;
    font-weight: 300;
    box-shadow: 0px 0px 0px 1px #c5c9ce;
    border-radius: 5em;
    background: #fff;
    padding: 0.5em 1em;
    text-shadow: 0px 0px 0.025em #575757;
    margin-right: 0.5em;
}

.thread-wrapper ul li a {
    color: #575757;
}

.thread-wrapper textarea {
    margin-top: 1.5em;
    padding: 1.5em 2em;
    border: 0px;
    box-shadow: 0px 0px 0px 1px #c5c9ce;
}

.community-thread .reply {
    font-size: 1em;
    margin: 2em 0 0.5em;
}

.community-thread .reply .badge {
    font-size: 0.8em;
    font-weight: 600;
    background: rgb(0, 170, 255) none repeat scroll 0% 0%;
    padding: 0.45em 1.1em;
    border-radius: 5em;
    position: relative;
    left: 1em;
}

.reply-preview .reply {
    box-shadow: 0px 0px 0px 1px #c5c9ce;
    background: #fff;
    padding: 1.5em 2em;
    font-size: 0.9em;
    border-radius: 2px;
}

.reply-preview .reply p {
    opacity: 0.9;
}

.reply-preview .thread-author {
    margin-top: 0.85em;
}

.reply-preview .thread-author img {
    display: inline-block;
    margin-right: 0.75em;
}

.reply-preview .thread-author .thread-admin {
    text-decoration: underline;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 0.85em;
    opacity: 0.65;
}

.reply-preview .thread-author .thread-time {
    text-transform: none;
    font-size: 0.75em;
    opacity: 0.6;
    font-weight: 400;
    text-decoration: none;
}

/*==============================================
=============== Login Classes ================
==============================================*/
.login {
    height: 100vh;
    background: rgba(36, 44, 54, 1);
    background: -moz-linear-gradient(top, rgba(36, 44, 54, 1) 0%, rgba(36, 44, 54, 1) 40%, rgba(34, 41, 51, 1) 40%, rgba(34, 41, 51, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(36, 44, 54, 1)), color-stop(40%, rgba(36, 44, 54, 1)), color-stop(40%, rgba(34, 41, 51, 1)), color-stop(100%, rgba(34, 41, 51, 1)));
    background: -webkit-linear-gradient(top, rgba(36, 44, 54, 1) 0%, rgba(36, 44, 54, 1) 40%, rgba(34, 41, 51, 1) 40%, rgba(34, 41, 51, 1) 100%);
    background: -o-linear-gradient(top, rgba(36, 44, 54, 1) 0%, rgba(36, 44, 54, 1) 40%, rgba(34, 41, 51, 1) 40%, rgba(34, 41, 51, 1) 100%);
    background: -ms-linear-gradient(top, rgba(36, 44, 54, 1) 0%, rgba(36, 44, 54, 1) 40%, rgba(34, 41, 51, 1) 40%, rgba(34, 41, 51, 1) 100%);
    background: linear-gradient(to bottom, rgba(36, 44, 54, 1) 0%, rgba(36, 44, 54, 1) 40%, rgba(34, 41, 51, 1) 40%, rgba(34, 41, 51, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242c36', endColorstr='#222933', GradientType=0);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.login .login-form-wrapper {
    color: #fff;
    margin: 0 auto;
    width: 30%;
    max-width: 480px;
    font-size: 0.4em;
    margin-top: 6.5em;
}

.login .login-form img {
    width: 10.556em;
}

.login .login-form {
    box-shadow: 0px 0px 0px 1px #2B333E;
    border-radius: 4px;
    padding: 4em 1.5em 2em;
    background: #222933;
}

.login .login-form p {
    opacity: 0.5;
    font-size: 0.8em;
    font-weight: 600;
    margin-bottom: 5em;
}

.login .login-form form {
    color: #575775;
}

.login .login-form form input {
    background: #2B333E;
    border-radius: 4px;
    margin-bottom: 1em;
    padding: 1.75em;
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
}

.login .login-form form button {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 1em;
    padding: 0.976em;
    margin-top: 1.5em;
}

.login .login-form form button i {
    margin-left: 0.2em;
}

.login .pass-inq {
    padding: 1.5em 0;
    font-size: 0.8em;
    font-weight: 600;
}

.login .pass-inq .forgot-pass, .new-account span {
    opacity: 0.45;
}

.login .pass-inq a {
    color: #fff;
}

/*==============================================
========== Settings-popup Classes ============
==============================================*/
#pageSettings .modal-dialog {
    margin-top: 9%;
}

.page-settings-popup-wrapper {
    font-weight: 400;
    font-size: 0.4em;
    padding: 0;
}

.page-settings-popup-wrapper .settings-popup-title {
    padding: 1.5em 3em;
    border-bottom: 1px solid #E7E9ED;
}

.page-settings-popup-wrapper h1 {
    margin: 0px;
    font-size: 1.2em;
    font-weight: 300;
    text-transform: capitalize;
}

.page-settings-popup-wrapper h1 span {
    border-bottom: 3px solid #0AF;
    color: #9499A0;
    font-size: 0.75em;
    padding: 0em 0.5em 1.5em 0.25em;
}

.page-settings-popup-wrapper h1 span i {
    font-size: 1.2em;
    vertical-align: middle;
    margin-right: 0.25em;
}

.page-settings-popup-wrapper h1 .close-icon {
    position: absolute;
    right: -1em;
    top: -1em;
    color: rgb(148, 153, 160);
    cursor: pointer;
}

.page-settings-popup-wrapper .settings-popup-body {
    background: #F9F9FB;
    padding: 2em 3em 3em;
}

.page-settings-popup-wrapper .nlp {
    padding-left: 0;
}

.page-settings-popup-wrapper .nrp {
    padding-right: 0;
}

.page-settings-popup-wrapper .settings-popup-checkbox {
    padding: 0;
    text-transform: capitalize;
    font-size: 0.9em;
    font-weight: 400;
    border-bottom: 1px solid rgba(231, 233, 237, 1);
    padding: 1.15em 0;
}

.page-settings-popup-wrapper .settings-popup-checkbox input[type="checkbox"] {
    position: absolute;
    left: -1000%;
}

.page-settings-popup-wrapper .settings-popup-checkbox .custom-checkbox {
    height: 1.5em;
    width: 1.4em;
    font-size: 0.95em;
    background: #FFF none repeat scroll 0% 0%;
    border-radius: 3px;
    box-shadow: 0px 0px 0px 1px rgba(231, 233, 237, 1);
    text-align: center;
    cursor: pointer;
    color: #fff;
    float: right !important;
}

.page-settings-popup-wrapper .settings-popup-checkbox .custom-checkbox.checked {
    box-shadow: 0px 0px 1px 1px #00AAFF;
    color: #00AAFF;
}

.page-settings-popup-wrapper .settings-popup-checkbox .custom-checkbox i {
    vertical-align: middle;
    position: relative;
    left: -1px;
}

.page-settings-popup-wrapper .settings-popup-select {
    padding: 1.15em 0;
    font-size: 0.9em;
    text-transform: capitalize;
    border-bottom: 1px solid rgba(231, 233, 237, 1);
}

.page-settings-popup-wrapper .settings-popup-select button {
    float: right !important;
    text-transform: capitalize;
    border: 0px;
    background: transparent;
    opacity: 0.4;
    color: #2B333E;
    padding-right: 1.5em;
}

.page-settings-popup-wrapper .settings-popup-select button::before {
    content: "\e5a5";
    font-family: "Flaticons Stroke";
    font-weight: normal;
    font-size: 1.1em;
    right: 0em;
    transition: all 0.2s ease-in-out 0s;
    position: absolute;
    color: #9699A0;
    top: 1.05em;
}

.page-settings-popup-wrapper .settings-popup-select ul {
    padding: 0;
    list-style: outside none none;
    opacity: 1;
    margin: 0;
    position: absolute;
    right: 0;
    box-shadow: 0px 0px 0px 1px #E7E9ED;
    background: #fff;
    color: #9699A0;
    border-radius: 3px;
    cursor: pointer;
    z-index: 1090;
    width: 5.5em;
    display: none;
}

.page-settings-popup-wrapper .settings-popup-select ul li {
    padding: 0em 0em 0.15em 0.35em;
    opacity: 0.7;
}

.page-settings-popup-wrapper .settings-popup-select ul li:hover {
    background: rgba(231, 233, 237, 0.6);
}

.page-settings-popup-wrapper .settings-popup-input label {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.75em;
    opacity: 0.7;
    padding: 1.25em 0px 0.3em;
}

.page-settings-popup-wrapper .settings-popup-input input, textarea {
    box-shadow: 0px 0px 0px 1px #E7E9ED;
    border-radius: 1px;
    border: 0px none;
    width: 100%;
    font-size: 0.75em;
    font-weight: 400;
    padding: 1.2em;
    color: #b3b3b3;
}

.page-settings-popup-wrapper .color-preview {
    padding: 0 0.786em;
}

.page-settings-popup-wrapper .color-box {
    padding: 0.3em;
    background: transparent none repeat scroll 0% 0%;
    box-shadow: 0px 0px 0px 1px #E7E9ED;
    border-radius: 1px;
    margin-top: 0.45em;
}

.page-settings-popup-wrapper .color-box .color-view {
    background: #9DF523 none repeat scroll 0% 0%;
    border-radius: 1px;
    padding: 0.75em 0.5em;
    width: 100%
}

.page-settings-popup-wrapper .settings-popup-upload p {
    margin: 0;
    text-align: center;
    opacity: 0.4;
    font-size: 0.75em;
    padding: 0.25em 0;
}

.page-settings-popup-wrapper .settings-popup-upload p a {
    color: #575757;
}

.page-settings-popup-wrapper .settings-popup-upload .fileupload {
    cursor: pointer;
    background: #00AAFF;
    color: #fff;
    text-align: center;
    width: 100%;
    font-weight: 300;
    font-size: 0.75em;
    padding: 1.4em 0;
    margin-top: 2em;
}

.page-settings-popup-wrapper .settings-popup-upload .fileupload input {
    opacity: 0;
    position: absolute;
    bottom: 0;
    height: 70%;
    width: 100%;
    cursor: pointer;
}

/*==============================================
============== My-Notes Classes ==============
==============================================*/
.my-notes {
    border-bottom: 1px solid #E7E9ED;
}

.my-notes .search-bar {
    padding: 1.15em 2em;
    font-size: 0.9em;
}

.my-notes .search-bar button {
    margin-right: 1.5em;
    padding: 0.75em 1.5em;
}

.my-notes .search-bar .input-group {
    top: 0.45em;
}

.my-notes .left-menu {
    padding: 0 3em;
}

.my-notes .left-menu .menu-title {
    padding: 1.5em 0 1em;
    font-weight: 400;
    color: #575757;
    text-transform: none;
    font-size: 1em;
}

.my-notes .left-menu textarea {
    font-size: 0.8em;
}

.my-notes .left-menu button {
    width: 100%;
    padding: 0.75em 1.5em;
    font-weight: 400;
    margin-top: 1em;
    font-size: 0.875em;
}

.my-notes .left-menu ul {
    padding: 0;
}

.my-notes .left-menu ul h3 {
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 600;
    opacity: 0.4;
}

.my-notes .left-menu ul li a {
    text-transform: capitalize;
    opacity: 1;
    font-size: 0.95em;
}

.my-notes .left-menu ul li::before {
    font-family: "FontAwesome";
    content: "\f111";
    opacity: 1;
    vertical-align: text-bottom;
    font-size: 0.5em;
    margin-right: 2em;
    vertical-align: middle;
}

.my-notes .left-menu ul li:nth-child(2)::before {
    color: #C6C6C6;
}

.my-notes .left-menu ul li:nth-child(3)::before {
    color: #1BB934;
}

.my-notes .left-menu ul li:nth-child(4)::before {
    color: #00AAFF;
}

.my-notes .left-menu ul li:nth-child(5)::before {
    color: #FFCC1A;
}

.my-notes p {
    margin-bottom: 1.5em;
    font-size: 1.1em;
}

.my-notes .drag-drop {
    border: 1px dashed rgb(198, 198, 198);
    text-align: center;
    background: rgb(243, 245, 249) none repeat scroll 0% 0%;
    color: rgb(150, 153, 169);
    font-size: 0.85em;
    font-weight: 600;
    padding: 1.75em 0em;
    border-radius: 3px;
    width: 100%;
}

.my-notes .drag-drop i {
    margin-right: 0.5em;
    opacity: 0.7;
}

.my-notes .tasks-list li {
    list-style: none;
    box-shadow: 0px 0px 0px 1px #E7E9ED;
    background: #fff;
    border-radius: 3px;
    border-left: 3px solid #00AAFF;
    padding: 0.75em 3em 0.5em 1.5em;
    font-size: 0.75em;
    margin-bottom: 1em;
    cursor: grab;
}

.my-notes .tasks-list li:last-child {
    border-left: 3px solid #FFCC1A;
}

.my-notes .tasks-list li p {
    margin-bottom: 1em;
}

.my-notes .tasks-list li .task-time {
    opacity: 0.5;
    margin-bottom: 0.5em;
}

.my-notes .tasks-list li .task-time i {
    font-size: 1.1em;
}

.my-notes-body {
    height: 100vh;
}

/*==============================================
============== Dashboard Classes =============
==============================================*/
.dashboard {
    background: #F1F4F8;
    padding: 3em 2em 10em 3em;
}

.dashboard h1 {
    font-size: 1.35em;
    margin: -1em 0 1em;
}

.dashboard-wrapper {
    box-shadow: 0px 0px 0px 1px #E7E9ED;
    border: 1px solid #E7E9ED;
    background: #fff;
    border-radius: 3px;
    padding: 0.75em;
    font-size: 1em;
    font-weight: 400;
}

.dashboard .video-details {
    padding: 0 1.5em;
}

.dashboard .video-details h2 {
    font-size: 1.2em;
}

.dashboard .video-details p {
    font-size: 0.75em;
    opacity: 0.9;
}

.dashboard .video-details .video-admin img {
    width: 6.2em;
    margin-top: 15px;
}

.tranings hr {
    margin: 1em 0 1.25em;
}

.traning-display-wrapper {
    padding: 0px;
    padding-right: 1.25em;
}

.traning-display {
    box-shadow: 0px 0px 0px 1px #E7E9ED;
    border-radius: 3px;
    padding: 0.25em;
}

.traning-display img {
    width: 100%;
    margin: 0px;
    height: 4em;
}

.course-title {
    margin-bottom: 2em;
}

.course-title h2 {
    font-weight: 400;
    font-size: 1.15em;
    margin: 0px;
    padding: 1.55em;
}

/*==============================================
======== Campaign-Dashboard Classes ==========
==============================================*/
.campaign-dashboard {
    background: #F1F4F8 none repeat scroll 0% 0%;
    font-size: 0.4em;
    padding: 0.5em 3em 3em;
    border-bottom: 1px solid #E7E9ED;
    position: relative;
}

.campaign-dashboard .campaign-title {
    padding: 1.25em 0 2em;
}

.campaign-dashboard .campaign-title h1 {
    margin: 0;
    font-size: 1.5em;
    padding: 0.275em 0;
}

.campaign-dashboard .campaign-title input {
    border: 0px;
    box-shadow: 0px 0px 0px 1px #E7E9ED;
    border-radius: 2px;
    padding: 0.8em;
    width: 20em;
    font-size: 0.8em;
}

.campaign-dashboard .nlp {
    padding-left: 0;
}

.campaign-dashboard .nrp {
    padding-right: 0;
}

.campaign-dashboard .campaigns {
    background: #fff;
    box-shadow: 0px 0px 0px 1px #E7E9ED;
    border-radius: 3px;
    padding: 0;
    margin-bottom: 3em;
}

.campaign-dashboard .campaigns h2 {
    font-size: 1.2em;
    border-bottom: 1px solid #E7E9ED;
    margin: 0;
    padding: 1.5em;
}

.campaign-dashboard .campaigns h2 a {
    float: right !important;
    margin-left: 0.8em;
    font-size: 0.82em;
    opacity: 0.3;
    vertical-align: middle;
    color: #575757;
}

.campaign-dashboard .campaigns h2 a:hover {
    opacity: 0.5;
}

.campaign-dashboard .campaigns .campaign-info {
    padding: 1em;
}

.campaign-dashboard .campaigns p {
    font-size: 0.8em;
    opacity: 0.85;
    margin-bottom: 0.25em;
}

.campaign-dashboard .campaigns ul li {
    list-style: none;
    display: inline-block;
    background: #C8CFD8;
    color: #fff;
    font-weight: 700;
    font-size: 0.75em;
    border-radius: 5em;
    padding: 0.25em 1em 0.5em;
}

.campaign-dashboard .campaigns .campaign-date {
    padding: 1em 0;
}

.campaign-dashboard .campaigns .campaign-date span:nth-child(1) {
    color: both;
    display: block;
    font-size: 0.775em;
    opacity: 0.5;
}

.campaign-dashboard .campaigns .campaign-date span:nth-child(2) {
    font-size: 1.25em;
}

.campaign-dashboard .campaigns button {
    border-radius: 5em;
    text-transform: capitalize;
    font-weight: 600;
    padding: 0.75em 1.25em;
    font-size: 1em;
}

/*============================================
=========== Mockup-Builder Classes ===========
==============================================*/
.bnrs-2 {
    padding-right: 2.5em;
    text-align: right;
}

.bnrs-2 button {
    position: relative;
    top: -0.27em;
}

.bnrs-2 ul li {
    font-size: 0.8em;
}

.mockup-builder .app-name {
    font-size: 1.1em;
}

.mockup-builder .page-name {
    font-size: 0.95em;
    opacity: 0.5;
}

.mockup-builder aside {
    background: #fff;
    box-shadow: 1px 0px 0px 0px #E7E9ED;
    z-index: 99;
    color: #575757;
    font-size: 0.4em;
    text-align: left;
    padding-left: 1.5em;
    padding-top: 2em;
}

.mockup-builder aside p {
    color: #00AAFF;
    font-size: 0.9em;
}

.mockup-builder .elements {
    margin: 1em 1px;
    padding: 0;
    font-size: 1em;
    display: none;
}

.mockup-builder .elements div {
    float: left;
    box-shadow: 0px 0px 0px 1px #E7E9ED;
    border-radius: 2px;
    padding: 0.6em 0.5em;
    margin-right: 0.75em;
    margin-bottom: 0.75em;
    width: 3em;
    height: 3em;
    text-align: center;
}

.mockup-builder .elements div p {
    background: #9499A0;
    color: #fff;
    font-weight: 600;
    font-size: 0.8em;
    padding: 0.2em 0.5em;
    border-radius: 2px;
    width: 100%;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
}

.mockup-builder .elements div:nth-child(2) p {
    width: 2em;
}

.mockup-builder .elements div:nth-child(3) p {
    text-align: right;
}

.mockup-builder .mockup-builder-aside-list {
    padding: 0;
    list-style: none;
    clear: both;
    display: block;
}

.mockup-builder .mockup-builder-aside-list li {
    margin-bottom: 1em;
    font-size: 0.95em;
    cursor: pointer;
}

.mockup-builder .mockup-builder-aside-list li:hover {
    color: #00AAFF;
}

.mockup-builder .mockup-builder-aside-list li.active {
    color: #00AAFF;
}

.mockup-builder .mockup-builder-aside-list li a {
    color: #575757;
}

.mockup-builder .left-section {
    background: url(/public/BaseCopyEngineApp/img/homepage/bg.jpg) repeat scroll 1% 2%;
    height: 100vh;
}

/*============================================
======== Dashboard-Wraning Classes ===========
==============================================*/
.dashboard-warning {
    display: table;
    font-size: 1em;
}

.dashboard-warning .dashboard-warning-wrapper {
    display: table-row;
    border-radius: 2px;
    background: #FF6B5D;
    color: #fff;
    margin-bottom: 2em;
}

.dashboard-warning .icon-side {
    display: table-cell;
    width: 10%;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 2.36em;
    height: 100%;
    float: left !important;
    padding: 0.525em 0em !important;
}

.dashboard-warning .icon-side i {
    vertical-align: middle;
    opacity: 0.6;
}

.dashboard-warning .detail-side {
    display: table-cell;
    padding: 1em 2em;
    width: 90%;
}

.dashboard-warning .detail-side i {
    position: absolute;
    right: 3px;
    top: 0;
    opacity: 0.6;
    cursor: pointer;
}

.dashboard-warning .detail-side i:hover {
    opacity: 1;
}

.dashboard-warning .detail-side h2 {
    font-size: 1.15em;
    margin: 0;
    opacity: 0.9;
}

.dashboard-warning .detail-side p {
    font-size: 0.8em;
    opacity: 0.7;
}

#videotutorials .modal-content {

    border-radius: 5px;

}

#videotutorials .modal-dialog {

    border-radius: 7px;
    box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.1);
    width: 700px;
    margin: 100px auto;

}

#videotutorials .campaign-form .feedback-form {

    padding: 1em 1.5em;

}

#videotutorials h1 {

    font-weight: 600;
    text-transform: unset;
    font-size: 1em;
    margin: 0;
    padding: 1.5em 0em 0em;
    font-family: Raleway;
    margin-bottom: 20px;
}

/* Style the tab */
div.tab {
    overflow: hidden;
    background-color: #fafafa;
    border-radius: 5px;
    padding: 15px;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 11px 16px;
    transition: 0.3s;
    font-size: 13px;
    font-family: raleway;
    font-weight: 600;
    margin: 5px;
    padding-top: 14px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #fafafa;
    font-size: 13px;
    font-family: raleway;
    font-weight: 600;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 5px;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    margin-top: 25px;
}

.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}