@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('grid/grid.css');
@import url('components/cpt-input-components.css');
@import url('components/cpt-components.css');
@import url('pages/nav-menu.css');
@import url('pages/main-layout.css');
@import url('pages/system-status.css');
@import url('pages/metrics.css');
@import url('pages/create-client.css');
@import url('pages/mc-dashboard.css');

:root {
    --primary: #0045E2;
}


html, body {
    font-family: 'Roboto', 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 1rem !important;
    -ms-overflow-style: none; /* IE and Edge */
    /*scrollbar-width: none; */ /* Firefox */
    color: #000000;
}

body {
    margin-bottom:0px !important;
}

.text-danger {
    color: #aa0000 !important;
}

.identity-text {
    color:#000000;
    font-size: 14px;
}

body::-webkit-scrollbar {
    display: none;
}

a, .btn-link {
    color: #fff;
}

a:hover, .btn-link:hover, .create-link:hover {
    color: var(--primary);
}

.body-link {
    color: #333;
}

.edit-link {
    color: #333;
}

.create-link {
    color: #333;
    cursor: pointer
}

.body-link:hover {
    color: rgba(0, 0, 0, 0.4);
}

.btn-primary {
    color: #fff;
    background-color: #0045E2;
    border-color: #0045E2;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    /*outline: 1px solid var(--primary);*/
}

.invalid {
    flex-direction: column;
    /*outline: 1px solid red;*/
}

.validation-message {
    color: #aa0000;
    font-size: 14px;
}

.success-message {
    color: green;
    font-size: 14px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


    .grey {
        color: #ccc;
    }

/*DTSP-3198 - reload link colour*/
#components-reconnect-modal > h5 > a {
    color: #48E7EA;
}











/* CUSTOM */
/*tiny mce*/
.tox-editor-container {
    z-index: 999;
}

.existing-user {
    max-height: 93px;
    overflow: hidden;
}

.additional-login-stuff {
    max-height: 330px;
    overflow: hidden;
}

#r-home-view-top-image-container-title {
    max-height: 200px;
    overflow: hidden;
}

#r-main-image-area-description {
    max-height: 100px;
    overflow: hidden;
}

/* badge on clientinfo */
.font-300 {
    font-weight: 300;
}

/*environment nav pill */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #0045E2;
    color: #fff;
}

/*footerbar*/
.bottom-row {
    background-color: #333;
    border-bottom: 1px solid #d6d5d5;
    height: 3.2rem;
    display: flex;
    align-items: center;
   /* position: sticky;*/
}

    .bottom-row a, .bottom-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

.bottom-row a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }


@media (min-width: 641px) {
    .bottom-row {
        position: fixed;
        bottom: 0;
        z-index: 1;
        /*position: sticky;*/
    }

    .top-row {
        z-index: 999 !important;
        /*position: sticky;*/
    }
}





/*pulse animation*/
.pulse {
    /*margin: 100px;*/
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 0 0 var(--primary);
    animation: pulse 5s infinite;
    cursor: pointer;
}

.pulse:hover {
    animation: none;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(131,145,145, 0.4);
    }

    70% {
        -webkit-box-shadow: 0 0 0 5px var(--primary);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(131,145,145, 0.4);
        box-shadow: 0 0 0 0 rgba(131,145,145, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px var(--primary);
        box-shadow: 0 0 0 5px var(--primary);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
        box-shadow: 0 0 0 0 rgba(255,0,0, 0);
    }
}



.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary);
    box-shadow: 0 0 3px var(--primary);
    border-color: var(--primary);
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 3px var(--primary);
}

.custom-checkbox .custom-control-input:active ~ .custom-control-label::before {
    box-shadow: 0 0 3px var(--primary);
    background: rgba(131,145,145,.3);
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0.25rem;
}

.custom-control-label::before {
    background-color: #fff;
    width: 40px;
    height: 40px;
}

.custom-control-label::after {
    width: 40px;
    height: 40px;
}

.custom-control-label {
    margin-top: 10px;
    position: unset;
}


/*helpers*/
/*.position-relative {
    position: relative;
}*/

/*.position-absolute {
    position: absolute;
}*/

.pointer {
    cursor: pointer;
}

.white {
    color: #fff;
}

/* badge on clientinfo */
.font-300 {
    font-weight: 300;
}

.popover {
    max-width: 776px !important;
}

small a {
    color: #6c757d;
    
}

small a:hover {
    text-decoration: none;
    color: var(--primary);
}


















.title-text-control {
    top: 50px;
    left: 60px;
    position: absolute;
    width: 557px;
    max-height: 158px;
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    border-width: 0px;
    font-size: 46px;
    /*overflow: hidden;*/
}

.strapline-text-control {
    top: 90px;
    left: 60px;
    position: absolute;
    /*max-height: 100px;*/
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    border-width: 0px;
    font-size: 46px;
    /*overflow: hidden;*/
    width: 560px;
    font-size: 16px;
    line-height: 1.2;
}

.tessello-go-title-text-control {
    top: 15px;
    left: 60px;
    position: absolute;
    width: 580px;
    /*max-height: 75px;*/
    color: #fff;
    background-color: transparent;
    /*border-color: #fff;
    border-width: 0px;*/
    font-size: 46px;
   /* overflow: hidden;*/
}

.login-left-sided-text-control {
    top: 45px;
    left: 90px;
    position: absolute;
    width: 380px;
    color: #fff;
    background-color: transparent;
    /*border-color: #fff;
    border-width: 0px;*/
}

.login-right-sided-text-control {
    top: 45px;
    left: 540px;
    position: absolute;
    width: 360px;
    color: #fff;
    background-color: transparent;
    /* border-color: #fff;
    border-width: 0px;*/
}

.learning-pathways-title-text-control {
    top: 65px;
    left: 90px;
    position: absolute;
    width: 480px;
    height: 100px;
    color: #fff;
    background-color: transparent;
    z-index: 1;
}

.experiences-title-text-control {
    top: 35px;
    left: 90px;
    position: absolute;
    width: 480px;
    height: 100px;
    color: #fff;
    background-color: transparent;
    z-index: 1;
}

input#logo-upload {
    cursor: pointer;
    top: 5px;
    left: 10px;
    position: absolute;
    opacity: 0;
    height: 50px;
    width: 20%;
}

input#background-upload {
    cursor: pointer;
    top: 380px;
    left: 405px;
    position: absolute;
    opacity: 0;
    z-index: 5;
    width: 20%;
}

input#tessello-go-background-upload {
    cursor: pointer;
    top: 215px;
    left: 405px;
    position: absolute;
    opacity: 0;
    z-index: 5;
}

input#homepage-background-upload {
    cursor: pointer;
    top: 412px;
    left: 405px;
    position: absolute;
    opacity: 0;
    z-index: 5;
}

input#events-background-upload {
    cursor: pointer;
    top: 250px;
    left: 205px;
    position: absolute;
    opacity: 0;
    z-index: 5;
    width: 50%;
}

input#learning-pathways-background-upload {
    cursor: pointer;
    top: 250px;
    left: 205px;
    position: absolute;
    opacity: 0;
    z-index: 5;
    width: 50%;
}

.margin-left-20 {
    margin-left: 20px;
}

.btn-primary-colour {
    background-color: #0045E2;
    color: #ffffff;
}

.opacity-1 {
    opacity: 1;
}

.btn-reset-colour {
    background-color: #a9a9a9;
    color: #fff;
}







/*drag and drop file upload css*/
/*.dropzone {
    border: 3px dashed steelblue;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    color: #444;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
}*/

.dropzone:hover {
    background-color: #f3f3f3;
    color: #333;
}

.dropzone input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    /*opacity: 0;*/
    cursor: pointer;
    top: 40%;
    left: 10%;
}

.dropzone-drag {
    background-color: grey;
}






















/*mapping css*/
/** Simple drag and drop with Blazor CSS **/

.maps-container {
    display: flex;
    justify-content: space-around;
}

.map-status {
    display: flex;
    flex-direction: column;
    width: 33%;
}
/*.map-status {
    display: flex;
    flex-direction: column;
    width: 335px;
}*/

    .map-status ul {
        flex: 1;
    }

.dropzone {
    padding: 30px;
    border: 1px dashed #75868a;
    list-style: none;
}

.no-drop {
    border: 2px dashed red;
}

.can-drop {
    border: 2px dashed green;
}

.draggable {
    /* margin-bottom: 10px;*/
    margin: 5px;
    padding: 10px 25px;
    border: 1px solid #4e4b4b;
    cursor: grab;
    background: #4e4b4b;
    color: #ffffff;
    border-radius: 5px;
    width: 250px;
    text-align: center;
}

    .draggable:active {
        cursor: grabbing;
    }

.dragging {
    cursor: grabbing;
}

.description {
    font-size: 18px;
}

.last-updated {
    margin-bottom: 0;
    font-size: 11px;
    color: #e1e5ea;
    font-weight: bold;
}

    .last-updated small {
        text-transform: uppercase;
        color: #c4cbd4;
        font-size: 11px;
    }



.drag-drop-box {
    position: absolute;
    top: 5px;
    left: 5px;
    height: 100px;
    width: 300px;
}

.btn-remove {
    border: solid var(--primary);
    border-width: 14px;
    height: 100%;
    margin: 5px;
}

.non-grab-cursor {
    cursor: auto !important;
}

.mapping {
    width: 590px;
}

ul.dropzone.CSVFields li.draggable {
    float: right;
}


ul.dropzone.Mapping li.draggable {
    float: left;
}

.opacity-1 {
    opacity: 1;
}


/*drag and drop file upload css*/
dropzone {
    border: 3px dashed steelblue;
    padding: 3rem;
    display: block !important;
    align-items: center;
    justify-content: center;
    background-color: #eee;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    color: #444;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
}

.dropzone:hover {
    background-color: #f3f3f3;
    color: #333;
}

.dropzone input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone-drag {
    background-color: grey;
}

.grid-font-size {
    font-size: 16px !important;
}

.grid-cell-alt {
    padding: 0.25rem !important;
}

.table td, .table th {
    padding: 0.25rem !important;
}

.grid-td-smaller-font-size {
    font-size: 14px;
    vertical-align: middle !important;
}

.invalid .form-control {
    border: 1px solid #aa0000;
}



/*pagination*/
.page-link {
    color: #212529 !important;
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

.grid-details {
    padding: 20px;
}

.stack-trace-markup {
    white-space: pre-line;
}



















/*Identity*/
h1 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.1rem;
    font-weight: bold;
    margin-top: 60px;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.1rem;
    font-weight: bold;
    margin-top: 20px;
}

h3 {
    padding: 10px;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    /*height: 100vh;*/
}

.container-verification {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
}

.inner-container {
    width: 55%;
    height: 95%;
    margin-bottom: 20px;
}

.identity-label {
    font-size: 12px;
    font-weight: bold;
}

.identity-input {
    border-radius: 30px;
    width: 100%;
}

.identity-resend-link {
    color: #000000;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
    border: none;
    background: none;
}

.identity-link {
    color: #000000;
    font-size: 12px;
    float: right;
    text-decoration: underline;
}

 .identity-link:hover {
    color: #0045E2;
}

.identity-button {
    border-radius: 30px;
    width: 80%;
    color: #ffffff;
    font-size: 1rem;
    background-color: #0045E2;
    font-weight: bold;
}

.identity-button:hover {
    background-color: #000AE2;
    color: #fff;
}

.identity-icon {
    margin-top: 40px;
}

.identity-left-image {
    width: 100%;
    height: 100%;
}

.identity-body {
    /*height: 100%;*/
    /*min-height: 100vh;
    overflow: hidden;*/
}

.height-100 {
    height: 100%;
}

.width-100 {
    width: 100%;
}

.identity-error {
    font-size: 14px;
    color: #aa0000 !important;
}

.authorization-digit-success-border-color {
    border-color: #008000;
}

.authorization-digit-failed-border-color {
    border-color: #aa0000;
}

.mfa-error-screen {
    width: 420px;
    margin-left: 95px;
    text-align: center;
}

.mfa {
    font-size: 1rem;
}

.toggle-password {
    font-size: 18px;
    vertical-align: middle;
    cursor: pointer;
    position: absolute;
    top: 40px;
    margin-left: 93%;
}

.align-centre {
    text-align: center;
}

.footer {
    overflow: auto !important;
}

.pagination-container {
    margin-top: 2rem;
}

.breadcrumbs-dropdown-models {
    margin-bottom: .5rem;
}

html body .input-group-append .input-map-file {
    top: 0%; 
    left: 0%;
}

.flex-child {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-child label {
    display: inline-flex;
    align-items: flex-start;
    font-size: 12px;
}

.flex-container {
    display: flex;
    margin-top: 60px;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;
    position: relative;
}

.flex-child {
    flex: 1;
    max-width: 100px;
}

.authentication-digits {
    height: 60px;
    width: 60px;
    margin: 5px;
    font-size: 16px;
    text-align: center;
}

.verification-button {
    width: 67%;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}






.red {
    background-color: red;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 35px;
}

.green {
    background-color: green;
    color: white;
    padding: 4px 8px;
    text-align: center;
    border-radius: 45px;
    margin: 10px 10px;
}







.no-border {
    border: none;
}

.app-title {
    color: #333;
    margin-top: 0px;
    font-size: 14px;
}

.reset-link {
    color: #0045E2 !important;
}








/*mvp mc user cpt-card-header*/
.cpt-card-header {
    color: #212529;
    text-align: left;
    padding: .40rem 1rem;
}

.cpt-card-body {
    padding: .8rem;
    font-size: 13px;
}

.cpt-card-footer {
    padding: .5rem;
    font-size: 13px;
}

.card-header-link {
    color: #000;
    text-decoration: none;
}

.card-title {
    margin-bottom: .2rem;
}

.status-inactive {
    border-radius: 20px;
    padding: 5px;
    color: #fff;
    background-color: #aa0000;
    font-size: 12px;
    margin-right: 10px;
}

.status-active {
    border-radius: 20px;
    padding: 5px;
    color: #fff;
    background-color: green;
    font-size: 12px;
    margin-right: 10px;
}

.page-card-title {
    font-weight: bold;
    font-size: 25px;
    margin-right: 20px;
    text-align: left;
}

.text-muted {
    color: #000000 !important;
}


.search-box {
    width: 50%;
}

.new-entity-button {
    border-radius: 30px;
    color: #ffffff;
    font-size: 1rem;
    background-color: #0045E2;
    border: none;
    padding: 7px;
    padding-left: 20px;
    margin-left: 60px;
}

.new-entity-button:hover {
    background-color: #000AE2;
    color: #ffffff;
    text-decoration: none;
}

.ahref-link {
    color: #000;
    margin-left: 50px;
    cursor: pointer;
}

.btn-reset {
    color: #000;
    margin-left: 50px;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    background-color: transparent;
}

.reset-disabled {
    text-decoration: none;
    cursor: default;
}

.ahref-link:hover {
    color: #000;
    /*text-decoration: none;*/
}

.action-button {
    text-align: end;
}

.w-10 {
    width: 10%;
}






/*pagination*/
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 13px;
}

.pagination-controls button {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #000000;
    padding: 5px 5px;
    margin: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination-controls button:hover {
    background-color: #007bff;
    color: white;
}

.pagination-controls button.active {
    background-color: grey;
    color: white;
    font-weight: bold;
}

.pagination-controls button:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    border-color: #ced4da;
}

.pagination-controls select {
    margin-right: 15px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.pagination-controls label {
    margin-right: 5px;
    font-weight: bold;
    margin-bottom: 0px;
}

.total-count {
    margin-left: 20%;
}






@media (max-width: 1024px) {
    .identity-body {
        overflow: auto;
    }

    .container {
        height: 100vh;
    }

    h1 {
        margin-top: 40px;
    }

    .mfa-error-screen {
        width: 95%;
        margin-left: 0px;
    }
}

@media (max-width: 912px) {
    .hide-medium-device {
        display: none;
    }

    .w-10 {
        width: 30%;
    }

    .checkbox-mobile {
        margin-bottom: 15px;
    }
}

@media (max-width: 820px) {
    
    .toggle-password {
        margin-left: 92%;
    }

    .verification-button {
        width: 60%;
    }

    .ahref-link {
        margin-left: 0px;
    }

    .action-button {
        text-align: left;
        margin-bottom: 5px;
        margin-top: 5px;
    }
}

@media ( max-width : 700px ) {
    .authentication-digits {
        height: 40px;
        width: 40px;
        font-size: 13px;
    }

    .flex-container {
        margin-left: 0px;
        margin-right: 0px;
    }

    .mfa-error-screen {
        width: 95%;
        margin-left: 0px;
    }

    .search-box {
        width: 100%;
    }

    .card-actions {
        margin-left: 15px;
    }
}

@media (max-width: 430px) {
    .toggle-password {
        margin-left: 88%;
    }

    .no-mobile {
        display: none;
    }
}