/* Forms */
div.input-group-text {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.form-control {
    background-clip: border-box;
    transition: none;
    color: #3e4958;
    height: 50px;
    padding: .5rem 1rem;
    font-size: 14px;
    line-height: 1.5;
    border-color: #cccdcf;
}

.form-control:focus {
    border: 1px solid #aaa;
    outline: 0;
    box-shadow: none;
    transition: none;
    color: #3e4958;
}

.form-control[readonly] {
    background: #fff;
}

textarea {
    border-radius: 0 !important;
}

/* Specifically for resources.html */
legend > hr {
    margin-top: .75em;
    margin-bottom: .75em;
}

legend.implementation-tools, legend.for-internal-use {
    padding-top: 24px;
}

/* Multiselect not using select2 */
.md-form {
    margin: 0 !important;
}

.select-wrapper span.caret {
    display: none !important;
}

.select-dropdown {
    border: 1px solid #cccdcf !important;
    min-height: 50px !important;
    font-size: 14px !important;
    background: #fff !important;
    line-height: 1.5 !important;
}

input.select-dropdown.form-control {
    padding-left: 1rem !important;
    width: -webkit-fill-available !important;
}

.md-form input:not([type]):focus:not([readonly]), .md-form input[type=date]:not(.browser-default):focus:not([readonly]), .md-form input[type=datetime-local]:not(.browser-default):focus:not([readonly]), .md-form input[type=datetime]:not(.browser-default):focus:not([readonly]), .md-form input[type=email]:not(.browser-default):focus:not([readonly]), .md-form input[type=number]:not(.browser-default):focus:not([readonly]), .md-form input[type=password]:not(.browser-default):focus:not([readonly]), .md-form input[type=search-md]:focus:not([readonly]), .md-form input[type=search]:not(.browser-default):focus:not([readonly]), .md-form input[type=tel]:not(.browser-default):focus:not([readonly]), .md-form input[type=text]:not(.browser-default):focus:not([readonly]), .md-form input[type=time]:not(.browser-default):focus:not([readonly]), .md-form input[type=url]:not(.browser-default):focus:not([readonly]), .md-form textarea.md-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #439afc;
    box-shadow: 0 1px 0 0 #439afc;
}

.select-wrapper.md-form > ul li label {
    color: #439afc;
}

.form-check-input[type=checkbox]:checked + label:before, label.btn input[type=checkbox]:checked + label:before {
    border-right: 2px solid #439afc;
    border-bottom: 2px solid #439afc;
}

.dropdown-content li > a, .dropdown-content li > span {
    color: #3e4958;
}

.dropdown-content li.active, .dropdown-content li:hover {
    background-color: #ecf5ff;
}

/* Input - Image Upload */
.file-field .file-path-wrapper {
    padding-left: 8px;
}

.file-field .file-path-wrapper, .file-field input.file-path {
    height: 50px;
}

/* Input - Dropdown Toggle */
.resource-type-dropdown {
    font-size: 14px !important;
    padding: 8px 16px !important;
    font-family: "Lato-Bold", sans-serif !important;
}

.resource-type-dropdown::after {
    margin-left: 1em !important;
}

/* Input - Append Button */
.append-btn {
    font-size: 14px !important;
    padding: 8px 16px !important;
    font-family: "Lato-Bold", sans-serif !important;
    margin: 0;
}

/* Input - Switch */
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #439afc;
    background-color: #439afc;
}

.switch-form-control {
    padding-bottom: 1rem;
    padding-top: 1rem;
    border-bottom: 1px solid #97a3b4;
    margin-bottom: 0;
}

.switch-form-control-last {
    padding-top: 1rem;
}

/* For Radio Button Toggles or Switch also, Sub-items in Collapse elements --- like in Methodology */
.sub-toggle-form-control-wrapper {
    border-bottom: 1px solid #97a3b4;
}

.sub-toggle-form-control-wrapper-last {
    border-bottom: none;
    border-top: 1px solid #97a3b4 !important;
}

.sub-toggle-form-control {
    margin-top: 1.25em;
    padding-bottom: .65em;
    margin-left: 1em;
    margin-right: 1em;
}

.secondary-sub-toggle-form-control {
    margin-left: 1.5em;
}

/* Date Picker */
.picker__box .picker__header .picker__date-display, .picker__box .picker__table .picker--focused, .picker__box .picker__table .picker__day--selected, .picker__box .picker__table .picker__day--selected:hover {
    background-color: #439afc;
}

.picker__box .picker__table .picker__day.picker__day--today {
    color: #439afc;
}

.picker__box .picker__footer .picker__button--today:before {
    border-top: .66em solid #439afc;
}

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

.btn-outline-primary {
    background-color: #fff;
    border-radius: 0px !important;
    color: #439afc !important;
    border-color: #439afc !important;
}

.btn.btn-lg {
    padding: .85rem 1.5rem !important;
    font-size: 14px !important;
    font-family: "Lato-Bold", sans-serif;
    letter-spacing: 1px;
}

.blue-btn {
    background-color: #439afc;
    border-radius: 0px !important;
    color: #fff;
    height: auto;
    font-size: 14px;
    padding: 10px 25px;
}

.blue-btn:hover {
    color: #fff;
    background: #357bc9;
}

.blue-link {
    color: #0E8EFA;
    cursor: pointer;
}

.blue-link:hover {
    color: #0B73C8;
    cursor: pointer;
}

.teal-btn {
    background-color: #1b9aaa;
    color: #fff;
    height: auto;
    font-size: 14px;
    padding: 10px 25px;
}

.teal-btn:hover {
    color: #fff;
    background: #028191;
}

.lt-grey-btn {
    background: #ddd;
    height: auto;
    font-size: 14px;
    padding: 8px 23px;
    border: 2px solid #999;
}

.lt-grey-btn:hover {
    background: #ccc;
}

.teal-link {
    color: #1FBCCA;
    cursor: pointer;
}

.teal-link:hover {
    color: #06A3B1;
    cursor: pointer;
}

.grey-btn {
    background-color: #b6bcc4;
    color: #fff;
    height: auto;
    font-size: 14px;
    padding: 10px 25px;
}

.grey-btn:hover {
    color: #fff;
    background-color: #909aa8;
}

.dark-grey-btn {
    background-color: #777;
    color: #fff;
    height: auto;
    font-size: 14px;
    padding: 10px 25px;
}

.dark-grey-btn:hover {
    background-color: #666;
    color: #fff;
}

.darkest-grey-btn {
    width: 100%;
    font-size: 14px;
    background: #647081;
    color: #d9e0e9;
    border: #647081;
    padding: 10px 25px;
}

.darkest-grey-btn:hover {
    background: #535d6b;
    color: #d9e0e9;
    border: #535d6b;
}

.white-btn {
    background-color: #fcfcfd;
    color: #999;
    height: auto;
    font-size: 14px;
    padding: 10px 25px;
    font-family: "Lato-Regular", sans-serif !important;
}

.white-btn:hover {
    color: #999;
    background-color: #f7f8fa;
}

.red-link {
    color: #E35C5C;
    cursor: pointer;
}

.red-link:hover {
    color: #cc5252;
    cursor: pointer;
}

button.btn-secondary {
    background: #a8d2d6 !important;
    color: #222;
    border: 2px solid #028191;
}

button.btn-secondary:hover {
    color: #222;
}

.file-field .btn {
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    height: 50px;
    padding: .84rem 2.14rem;
    padding-top: 1.1em;
    font-size: 14px;
    font-family: "Lato-Regular", sans-serif !important;
    letter-spacing: 1px;
}

.save-continue {
    float: right;
    margin-top: 1rem;
    margin-right: 0px;
    margin-left: 20px;
}

.save-continue.teal-btn {
    border: 2px solid #1b9aaa;
}

.back {
    margin-top: 1.25rem;
    margin-right: 0px;
}

/* Icon Buttons */
.material-tooltip-main {
    margin-left: 12px !important;
}

.dk-grey-icon-link {
    color: #5e6a7a !important;
}

.dk-grey-icon-link:hover, .dk-grey-icon-link:focus {
    color: #4B5461 !important;
}

.grey-icon-link {
    color: #7E8794 !important;
}

.grey-icon-link:hover, .grey-icon-link:focus {
    color: #5e6a7a !important;
}

.lt-grey-icon-link {
    color: #9EA5AF !important;
}

.lt-grey-icon-link:hover, .lt-grey-icon-link:focus {
    color: #7E8794 !important;
}

.btn-add {
    color: #909397;
    font-size: 24px;
}

.btn-remove {
    color: #e35c5c;
    font-size: 24px;
}

.remove-resource {
    padding-top: 16px;
}

.remove-resource:hover {
    cursor: pointer;
}

/* User Feedback */
.success-msg {
    color: #1fbcca;
}

/* Required Input Asterisk Color */
.req {
    color: #E35C5C;
}

.document-form-wrapper,
.main-content-wrapper,
#datalist-container {
    padding: 30px;
    box-shadow: none;
    margin-left: 245px;
}

.document-form-wrapper {
    background: #F1F5FB;
    height: 100%;
    min-height: 100vh;
}

/* --- Main Side Navigation on Dashboard --- */
.main-side-nav {
    background-color: #2b3542;
    color: #FFF;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    scrollbar-width: none;
}

@media only screen and (max-width: 1440px) {
    .side-nav.fixed {
        transform: translateX(0%);
    }
}

@media only screen and (max-width: 767px) {
    .side-nav.fixed {
        transform: translateX(-105%);
    }

    .document-form-wrapper,
    #datalist-container {
        margin-left: 0px;
    }

    .btn {
        margin: 0px;
    }
}

/* Default Logo */
.side-nav-brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 64px;
    background-color: #2a3441;
}

.side-nav-brand-icon {
    font-size: 19px;
    color: #f1f5fb;
    background-color: #1b9aaa;
    border-radius: 6px;
    padding: 8px;
}

.side-nav-brand-link {
    font-size: 1.5rem !important;
    font-weight: 300;
    color: #FFF;
    margin: 0 16px;
    letter-spacing: 1.5px;
    padding-left: 0 !important;
}

.side-nav-brand-link:hover {
    color: #808c99;
}

@media (max-height: 992px) {
    .side-nav .logo-wrapper, .side-nav .logo-wrapper a {
        height: 56px;
    }
}

/* Links */
.navList {
    width: 240px;
    padding: 0;
    margin: 0;
    background-color: #2b3542;
    list-style-type: none;
    background-image: linear-gradient(360deg, #2b3542 28%, #212b36 77%, #202932 106%);
}

.navList li:first-child {
    margin-top: 8px;
}

.navList-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 3px !important;
    color: #828a96;
    text-transform: uppercase;
    font-size: 15px;
    font-family: 'Lato-Regular', sans-serif;
}

.navList-subheading {
    position: relative;
    padding: 12px 36px !important;
    color: #fff;
    font-size: 14px;
    text-transform: capitalize;
}

.navList-subheading-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #828a96;
    width: 12px;
}

.navList-subheading-title {
    margin: 0 16px;
}

.navList-subheading-title a {
    color: #f1f5fb;
    height: 0;
    line-height: 0;
    padding-left: 0;
    font-size: 14px;
}

.navList-subheading:after {
    position: absolute;
    content: "";
    height: 6px;
    width: 6px;
    top: 17px;
    right: 36px;
    border-left: 1px solid #828a96;
    border-bottom: 1px solid #828a96;
    transform: rotate(225deg);
    transition: all .2s;
}

.navList-subheading:hover {
    background-color: #333e4c;
    cursor: pointer;
}

@media only screen and (min-width: 46.875em) {
    /*.grid {
        display: grid;
        grid-template-columns: 240px calc(100% - 240px);
        grid-template-rows: 50px 1fr 0px;
        grid-template-areas: 'sidenav header' 'sidenav main' 'sidenav footer';
        height: 100vh;
    }

    .sidenav {
        position: relative;
        transform: translateX(0);
    }*/
}

/* Login and Registration Forms */
.login-form-inner, .registration-form-inner {
    padding: 30px;
    background: #293449;
}

.login-form-inner h1, .registration-form-inner h1 {
    color: #fff;
    font-size: 2.25rem;
}

div.login-form-inner input {
    font-size: 1em !important;
    padding: 1.5em .5em !important;
}

div.registration-form-inner input {
    font-size: 1em !important;
    padding: 1.5em 1em !important;
}

div.login-form-inner form i, div.registration-form-inner form i {
    color: rgba(0, 0, 0, .15);
}

::placeholder {
    color: rgba(0, 0, 0, .25) !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(0, 0, 0, .25) !important;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(0, 0, 0, .25) !important;
}

.invalid-response {
    color: #fff;
    margin-top: 8px;
}

.login-form-forgot {
    float: right;
}

a.register-login-switcher {
    float: right;
    font-weight: 600;
    margin-top: 16px;
}

@media only screen and (max-width: 767px) {
    .btn {
        width: 100%;
    }

    .login-form-inner {
        padding-bottom: 4em;
    }

    .login-form-forgot {
        padding: 1em 0;
    }
}

/* Main Document Steps Nav */
ul.stepper.horizontal {
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 0px;
    min-height: unset;
}

ul.stepper li a {
    padding: 0px;
}

ul.stepper div.step-title {
    color: #97a3b4;
    font-family: "Lato-Regular", sans-serif;
    font-size: 18px;
    text-align: left;
}

li.step.active div.step-title {
    color: #5e6a7a;
}

ul.stepper .step:not(:last-of-type).active {
    margin-bottom: .625rem;
}

ul.stepper.horizontal .step .step-title:before {
    /*background-color: rgba(0,0,0,.1);*/
    background-color: #adb5bd;
}

ul.stepper.horizontal .step.active .step-title:before {
    background-color: #439afc;
}

ul.stepper .step-title:hover {
    background: none;
}

/* Main Document Resources */
.add-custom-link {
    padding-left: 8px;
}

.methodology-resources-container, .implementation-tools-container, .doi-container {
    display: none;
}

/* Main Document - Methodology */
.toggle-wrap {
    align-items: center;
    padding-bottom: .5rem;
    padding-top: .5rem;
    border-bottom: 1px solid #97a3b4;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: auto;
}

.toggle-wrap-last {
    align-items: center;
    padding-bottom: .5rem;
    padding-top: .5rem;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: auto;
}

.toggle-text {
    font-size: 16px;
    font-family: 'Lato-Regular', sans-serif;
    color: #3e4958;
    margin-left: 8px;
    margin-bottom: 0;
}

/* Pocket Guide Form */
.abbr-switch, .grading-table-switch {
    margin-top: 1em;
    margin-bottom: 1.5em;
}

.edit-link {
    margin-left: .7em;
    font-size: 14px;
}

/* Image Uploads */
#cover-img-preview img,
#magnifying-img-preview img,
.image-preview img {
    max-width: 100%;
}

/* Grading Table Modal */
div#gradingTablesModal div.modal-dialog {
    width: 50%;
}

/* Moodle Quiz Modal */
div#moodleQuizModal div.modal-dialog {
    width: 50%;
    max-width: 90%;
}

.table-data-form {
    margin: 0px 30px;
}

/* Grading Table Editor List */
td.grading-table-name {
    width: 15%;
}

td.grading-table-btns {
    width: 25%;
}

.grading-table-modal {
    height: 80vh !important;
}

/* Abbreviations */
.abbr-add {
    left: 35px;
    position: relative;
    top: -61px;
}

.abbr-container:first-of-type i.abbr-remove {
    display: none;
}

.add-abbr-row {
    height: 0;
}

/* Custom Add/Remove Areas */
.custom-container {
    padding: 1px 0 14px;
}

/* --- Builder --- */
/* Elements */
/* Modal */
.modal-header {
    padding: 16px 24px 8px;
}

.modal-title {
    text-transform: uppercase;
}

.modal-body {
    height: auto;
}

.builder-element-form {
    margin: 0px 30px;
}

.toc-switch {
    margin-bottom: 0;
}

#subsection-content-editor {
    height: 77vh;
}

/* Recommendations */
.rec-form fieldset {
    margin-bottom: 1em;
}

.rec-form legend > hr {
    margin-bottom: 0;
    margin-top: .5em;
}

.custom-control-input.against-switch:checked ~ .custom-control-label.against-label::before {
    border-color: #e35c5c;
    background-color: #e35c5c;
}

.custom-control-input.highlight-switch:checked ~ .custom-control-label.highlight-label::before {
    border-color: #e3e35c;
    background-color: #ebcf19;
}

.custom-control-input.against-switch:focus ~ .custom-control-label.against-label::before {
    box-shadow: 0 0 0 .2rem rgba(232, 124, 124, .25);
}

.custom-control-input.against-switch:focus:not(:checked) ~ .custom-control-label.against-label::before {
    border-color: #97a3b4;
}

aside.main-side-nav {
    transform: translate(0);
    overflow: scroll;
}

@media (min-width: 992px) {
    .vertically-align-custom-switch {
        padding-top: 40px;
    }
}

/* Confirmation modal */
.confirmation-modal .modal-title {
    position: absolute;
    line-height: 1;
}