@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

:root {
    --vistapointBlue: #186DB6;
    --vistapointBlueHover: #074275;
    --vistapointBlueLight: #186DB640;
    --vistapointBlueLightHover: #07427540;
    --successGreen: #8FC93A;
    --lightBlueAccent: #008CEB;
}

html, body {
    font-family: 'Calibri', Helvetica, Arial, sans-serif;
    font-size: 1rem !important;
}

body {
    font-size: 1rem !important;
}

html, body, #app {
    height: 100%;
    overflow: hidden;
}

#app {
    background-color: inherit;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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;
}

.bg-vistapointblue {
    background-color: var(--vistapointBlue) !important;
}
.bg-darkheader {
    background-color: #3F4756 !important;
}

.bg-lightgrey {
    background-color: #f2f5f7 !important;
}

.spinner-border-custom {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid var(--vistapointBlue);
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: 0.75s linear infinite spinner-border;
    animation: 0.75s linear infinite spinner-border;
}

.folder-tree-sidebar{
    width: 18vw !important;
}

.text-vistapointblue {
    color: var(--vistapointBlue) !important;
}

.fill-vistapointblue {
    fill: var(--vistapointBlue) !important;
}

.menu-icon-vistapoint {
    mask-image: url("../Images/VistapointLogoWithWords_White.svg");
    -webkit-mask-image: url("../Images/VistapointLogoWithWords_White.svg");
}

.bg-vistapointgreen {
    background-color: #2BA84A !important;
}

.bg-vistapointblue-light {
    background-color: #186DB640 !important;
}

/* Adding cursor just works: */
button[aria-disabled="true"] {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
button[aria-disabled="true"]:active {
    pointer-events: none;
}

.filebuttonlabel{
    cursor: pointer !important;
}

.filebuttonlabel:hover {
    background-color: lightgrey !important;
}

.btn-primary {
    background-color: var(--lightBlueAccent) !important;
    border-color: var(--lightBlueAccent) !important;
}

.remove-main-content {
    margin: -1.1rem -2rem 0 -2rem !important;
    height: 104% !important;
}

.dxbl-treeview-item-container{
    width: 100% !important;
}

.h-90{
    height: 90% !important;
}

.btn.btn-tablelink {
    font-size: 0.875rem !important;
    text-decoration: none !important;
    color: var(--vistapointBlue);
}

.btn.btn-tablelink:hover {
    text-decoration: underline !important;
}

.dxbl-toolbar-font-size {
    font-size: 1rem !important;
}

.dxbl-toolbar {
    font-size: 1rem;
}

.offcanvas-br80 {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    height: 86% !important;
    /*height: 77.5% !important;*/
    top: auto !important;
}

.offcanvas-brw80 {
    position: absolute !important;
    bottom: 0 !important;
    width: 75% !important;
    top: auto !important;
}

.right-0{
    right: 0 !important;
    left: auto !important;
}

.left-0 {
    left: 0 !important;
    right: auto !important;
}

.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active {
    background-color: darkgrey !important;
    opacity: 60% !important;
    color: black !important;
}

.dxbl-treeview .dxbl-treeview-item > .dxbl-treeview-item-content > .dxbl-treeview-item-container:not(.dxbl-disabled):not(:disabled).dxbl-active::before {
    background-color: darkgrey !important;
    opacity: 60% !important;
    color: black !important;
}

.drag-and-drop-text{
    opacity:0% !important;
}

.drag-and-drop-text:hover {
    opacity: 100% !important;
}

.tablecol-auto {
    table-layout:auto;
}

/*Thank you to -> https://tobiasahlin.com/spinkit/  */
.sk-folding-cube {
    color: #186DB6;
    margin: 20px auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

    .sk-folding-cube .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

        .sk-folding-cube .sk-cube:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #333;
            -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
            animation: sk-foldCubeAngle 2.4s infinite linear both;
            -webkit-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
        }

    .sk-folding-cube .sk-cube2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
    }

    .sk-folding-cube .sk-cube3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
    }

    .sk-folding-cube .sk-cube4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
    }

    .sk-folding-cube .sk-cube2:before {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }

    .sk-folding-cube .sk-cube3:before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }

    .sk-folding-cube .sk-cube4:before {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }

@-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%, 75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%, 100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}
.spinner-cube {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
}

.cube1, .cube2 {
    background-color: #333;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
    }

    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
    }

    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
    }

    100% {
        -webkit-transform: rotate(-360deg)
    }
}

@keyframes sk-cubemove {
    25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }

    50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    }

    50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }

    75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }

    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

.spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

    .spinner > div {
        background-color: #333;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .spinner .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .spinner .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }

    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}


.nav-link.active {
    background-color: var(--vistapointBlue) !important;
    border-color: var(--vistapointBlue) !important;
    color: white !important;
}

.nav-link{
    color: var(--vistapointBlue)!important;
}

.btn-primary-file {
    background-color: var(--lightBlueAccent);
    color: white;
    padding-right: 1.1rem;
    padding-left: 1.1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.btn-primary-file:hover {
    background-color: var(--vistapointBlueHover) !important;
    color: white !important;
}

.btn-primary-file:active {
    background-color: var(--vistapointBlueHover) !important;
    color: white !important;
}

.btn-secondary-file {
    background-color: var(--vistapointBlueLight);
    color: black;
    padding-right: 1rem;
    padding-left: 1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.btn-secondary-file:hover {
    background-color: var(--vistapointBlueLightHover) !important;
    color: black !important;
}

.btn-secondary-file:active {
    background-color: var(--vistapointBlueLightHover) !important;
    color: black !important;
}

.grid-mh{
    max-height: 600px;
}

.grid-mh-sm {
    max-height: 300px;
}

.btn.btn-breadcrumb-link {
    font-size: 0.875rem !important;
    padding: 0 !important;
    text-decoration: none !important;
    line-height: normal !important;
    color: var(--vistapointBlue);
}

.btn.btn-breadcrumb-link:hover {
    text-decoration: underline !important;
}

.remove-focus:focus-visible {
    outline: none !important;
}

.dxbl-toolbar-item-tmpl
{
    width: 100% !important;
}

.btn.btn-success {
    background-color: var(--successGreen) !important;
    border-color: var(--successGreen) !important;
}

.text-vp-green {
    color: var(--successGreen) !important;
}

.form-signin {
    max-width: 450px;
    padding: 1rem;
}

.settings-page-content {
    max-width: 750px;
    padding: 1rem;
}

.dxbl-accordion-group-header{
    background-color: white !important;
    border:none !important;
    color: var(--vistapointBlue) !important;
}

.w-33{
    width: 33% !important;
}

.w-38 {
    width: 38% !important;
}

.btn-preview{
    opacity:0%;
}

.btn-preview:hover {
    opacity: 100%;
}

.folder-treeview {
    max-height: 60vh;
}

.tooltip-image {
    position: relative;
    display: inline-block;
    margin-right: 20px;
}

    .tooltip-image .tooltiptext {
        visibility: hidden;
        background-color: lightgray;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 1px;
        position: absolute;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
        max-height: 200px;
        width: 100%;
        max-width: 200px;
    }

.tooltip-image:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-image .tooltiptext.right {
    bottom: 50%;
    left: 105%;
    margin-bottom: -15px;
}

.gridcol-image {
    overflow: visible;
}

.div-grid-image {
    width: 100px;
    height: 100px;
}

/*.div-grid-image:hover {
    width: 200px;
    height: 200px;
}*/

.grid-image {
    height: 100%;
    max-height: 100px;
    width: 100%;
    max-width: 100px;
}

.grid-image-lg {
    height: 100%;
    max-height: 250px;
    width: 250px;
    max-width: 250px;
    /*.grid-image:hover {
    height: 100%;
    max-height: 200px;
    width: 100%;
    max-width: 200px;
}*/
}

.grid-image-md {
    height: 100%;
    max-height: 200px;
    width: 200px;
    max-width: 200px;
    /*.grid-image:hover {
    height: 100%;
    max-height: 200px;
    width: 100%;
    max-width: 200px;
}*/
}

.icon-flipped
{
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

.drag-drop-box {
    border: solid;
    border-style: dashed dashed;
    border-color: lightgray;
}

.drag-drop-box:hover {
    border-style: solid solid;
    border-color: gray;
    background-color: lightgray;
    opacity: 25%;
}

.drag-drop-box2 {
}

    .drag-drop-box2:hover {
        border-style: solid solid;
        border-color: var(--lightBlueAccent);
        background-color: lightgray;
        opacity: 25%;
    }

.dragover-drop-box2 {
    border-style: solid solid;
    border-color: var(--lightBlueAccent);
    background-color: lightgray;
    opacity: 25%;
}

.progressbar-fileimport {
    border-radius: 0;
    height: 6px;
}

.progress {
    border-radius: 0 !important;
    height: 6px !important;
}

.linkhover {
    text-decoration: none !important;
}

.linkhover:hover{
    text-decoration:underline !important;
}

.mw-tablelink {
    max-width: 275px;
}

.linkflyout{
    width:fit-content !important;
}

.fs-folder{
    font-size: 1rem !important;
}

.doc-row{

}

.button-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.doc-row:hover {
    background-color: #ECF1F540;
}

.doc-row:hover .button-overlay {
    opacity: 1;
}

.text-inactive {
    cursor: pointer;
}