/*NavBarTop*/
.nav-item a {
/*    color: #d7d7d7;*/    
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
}

.nav-item a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.content {
    padding-top: 1.1rem;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

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


@media (min-width: 768px) {

    .navbar-toggler {
        display: none;
    }
}

/*_______Scrolling menu Css___________*/
*, body {
    margin: 0;
    padding: 0;
}

body {
    /*background-color: #ebebeb;*/
    font-family: 'Fira Sans', sans-serif;
    /*font-size:0.9rem;*/
    /*line-height:1.2;*/
}

.main-menu {
    background-color: #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0px 0px 5px gray;
    width: 60px;
    height: 80vh;
    position: fixed;
    top: 100px; /*LSD_added*/
    left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    transition: .3s ease;
    /*z-index: 100;*/ /*z-index doesn't work on on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).*/
}

    .main-menu:hover /*, .main-menu:active*/ {
        width: 520px;
        overflow-y: scroll;
    }

    .main-menu .menu-item {
        padding-left: 10px;
        padding-right:10px;
        line-height:40px;
    }


        .main-menu .menu-item:hover {
            background-color: lightgray;
            cursor: pointer;
        }

        .main-menu .menu-item .fa {
            color: gray;
            width: 40px;
            /*font-size: 25px;*/
            padding: 10px;

        }

        .main-menu .menu-item:hover > .fa {
            color: cadetblue;
        }

section.home {
    background-color: #f3f3f3;
}

::-webkit-scrollbar {
   /* width: 10px;*/
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: #bbbbbb; 
    border-radius: 10px;
}



/*_________LSD_____________*/

hr{
    margin-top:1px;
    margin-bottom:7px;
}

.LSD_navbar-toggler {

}

.LSD_sidebar-toggler {

}

.LSD_container {
    /*position: fixed;*/
    /*top: 5rem;*/
    margin-left:auto;margin-right:auto;
    transition: .3s ease;
}


@media (min-width: 768px) {
    .LSD_navbar-toggler{
        display:none;
    }

    .LSD_container{
/*        margin-left:65px;*/
        padding-left:60px;
    }

    .LSD_BackgroundImage1 {
        margin-left: 65px;
    }

    .LSD_BackgroundImage2 {
/*        display: none;
*/    }

    .LSD_LoginNavItem {
        margin-left: auto; /*parent must be flex*/
    }
}

@media (max-width: 768px) {
    .LSD_sidebar-toggler {
        display: none;
    }

    .LSD_container {
        margin-left: 0px;
    }
    .LSD_BackgroundImage1 {
        margin-left: 0px;
        display: none;
    }
    .LSD_LoginNavItem {
    }
}

/*Backgrounds*/
.LSD_BackgroundImage1 {
    background-image: url('../Assets/LogoBigSteel400.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 143px;
    min-width: 400px;
    transition: .3s ease;
}

.LSD_BackgroundImage2 {
    background-image: url('../Assets/Logo_small_red.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    /*min-height: 50px;*/
    transition: .3s ease;
}

.LSD_BackgroundImage3 {
    background-image: url('../Assets/Logo_small_tab.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
}

.LSD_BackgroundImage4 {
    background-image: url('../Assets/ContactsLogo.jpg');
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
/*    height: 1156px;*/
    width: 774px;
}

li {
    cursor: pointer;
} /*This is for the dropdown menu mousehover*/

.LSD_center {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 180px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.LSD_text-light {

    color: whitesmoke;

}

.LSD_text_truncate7 {
    height: 180px;
    display: -webkit-box;
    -webkit-line-clamp: 7;
/*    -webkit-box-orient: vertical;
    -webkit-box-pack: center;*/
-webkit-box-orient: horizontal;
-webkit-box-align: center;
    overflow: hidden;
} /* https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text */

.vertical-rl {
    writing-mode: vertical-rl;
    padding-top: 70px;
    /*    position: absolute;
    left: 0;
    top: 0;*/
    /*line-height: 1;*/
    color: crimson;
    font-size: 40px;
    /*font-weight: 800;*/
/*     font-family: "freight-big-pro", Georgia, serif;
   font-family: 'Fira Sans', sans-serif;*/
}

/*ul li::marker {
    font-size: 150%;
    color: green;
}*/



/* Colors
    widows wood: #af9d79
    roof red: #a14a42
    door green: #b4b788
    marble pink: #f6e1c0
    glass blue: #c3ced7

    main red: crimson rgb (220,20,60); #dc143c
    lightened 10%: #FF6189
*/

/*dashboard*/
.lsd-container-3 {
    display: flex;
    width:100%;
    align-items: flex-start;
    align-content:flex-end;
    flex-wrap: wrap;
    justify-content: space-between;
}

.lsd-container-3-box {
    /*flex: 1 1 35%; flex-grow flex-shrink flex-basis*/
    flex: 3;
    /*min-width: 30em;*/
    /* flex-basis: 50%;*/
    margin: 5px;
    /*padding: 5px;*/
    /* max-width: max-content;*/
    min-width:320px; /*20rem*/
    max-width: 570px;
}

.lsd-container-3b-box {
    /*min-width: 20em;*/
    flex: 2;
    margin: 5px;
    padding: 5px;
    min-width :300px;
    max-width:400px
}

/* Instructions pages*/
.lsd-text-container {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: space-around; /*This looks good only if the number of boxes is even, otherwise the last one ends up in the middle, which is not cute. In case you can just add an empty: "<div class="lsd-text-container-box"></div>"*/
}
.lsd-text-container-box {
    flex-basis: 500px;
    max-width: 500px;
    min-width:320px;
    flex:1;
    padding:1rem;
}

.lsd-text {
    text-align: justify;
}
    /*end Instruction pages*/


    .lsd-Card-Input {
        background-color: #FFE3DC;
    }

.lsd-EditingBackground {
    background-color: #FFE3DC;
    transition: background .4s ease,color .4s ease;
}

.lsd-Button {
    min-width:30%;
    font-size: 16px;
    line-height: 16px;
    padding: 6px;
    border-radius: 0px;
    /*font-family: Georgia, serif;*/
    font-weight: normal;
    text-decoration: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    color: #fff;
    border-color: crimson ;/* #da1710;*/
    background-color: crimson; /*#da1710; Custom red*/
    transition: background .2s ease,color .2s ease;
    /*box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.59);*/ /*Right, down (+-), spread, blur, color, opacity*/
    display: inline-block;
    border-radius:3rem;
}

    .lsd-Button:hover {
        background: #FF6189;
        border-color: #FF6189;
    }

    .lsd-Button:active {
        background: #FF6189;
    }

    .lsd-Button:focus, .btn:active { /*This is to get rid of the border after click*/
        outline: none !important;
        /*box-shadow: none;*/
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
        text-decoration: underline;
    }

/*.lsd-Button-Light {
    color: #181b25;
    font-size: 16px;
    line-height: 16px;
    padding: 6px;
    border-radius: 0px;*/
    /*font-family: Georgia, serif;*/
    /*font-weight: normal;
    text-decoration: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    border-color: transparent;
    background-color: #fff;
    transition: background .2s ease,color .2s ease;*/
    /*box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.59);*/ /*Right, down (+-), spread, blur, color, opacity*/
    /*display: inline-block;
}

    .lsd-Button-Light:hover {
        background: #e55d58;
        color: #fff;
    }

    .lsd-Button-Light:active {
        background: #ed8b88;
        color: #fff;
    }

    .lsd-Button-Light:focus, .btn:active {*/ /*This is to get rid of the border after click*/
        /*outline: none !important;*/
        /*box-shadow: none;*/
        /*box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
    }*/

.lsd-Button-Link {
    color: #181b25;
    /*    font-size: 16px;
    line-height: 16px;
    padding: 6px;*/
    border-radius: 0px;
    /*font-family: Georgia, serif;*/
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    border-color: transparent;
    background-color: transparent;
    transition: background .2s ease,color .2s ease;
    /*box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.59);*/ /*Right, down (+-), spread, blur, color, opacity*/
    display: inline-block;
}

    .lsd-Button-Link:hover {
        color: #e55d58;
    }

    .lsd-Button-Link:active {
        color: #ed8b88;
    }

    .lsd-Button-Link:focus, .btn:active { /*This is to get rid of the border after click*/
        outline: none !important;
        box-shadow: none;
        /*box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);*/
        text-decoration: underline;
    }

/*Style for Modal*/
.btn-round {
    border-radius: 3rem;
}



.social-buttons .btn {
    margin: 0 0.5rem 1rem;
}

.signup-section {
    padding: 0.3rem 0rem;
}

.text-info {
    color: #17a2b8 !important;
}

/*________________________LSD ADDED for Toast_______________________*/
.LSD_toast {
    display: none;
    padding: 1.5rem 0 1.5rem 0;
    color: #fff;
    z-index: 1;
    position: fixed /*absolute makes it scroll with the background*/;
    width: 18rem;
    top: 7%;
    border-radius: 0rem;
    /*left: 50%;*/
    right: 5%;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}


.LSD_toast-icon {
    display: flex; flex:1;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 1rem;
    font-size: 2.5rem;
}

.LSD_toast-body {
    display: flex; 
    flex-direction: column;
    flex: 2;
    padding:0 1rem 0 0;
}

    .LSD_toast-body p {
        margin-bottom: 0;
    }

.LSD_toast-visible {
    display: flex;
    flex-direction: row;
    animation: LSD_toast_fadein 1.0s;
}

@keyframes LSD_toast_fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.LSD_toast-hidden {
    display: flex;
    flex-direction: row;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1.0s, opacity 1.0s linear; /*Note we use transition here in place of animation*/
}


/*_____________________END ADDED for Toast________________________*/

/*Blog css*/
/*@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
*/
/*@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}*/


.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.LSD-Blog-Container{

}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
         max-width: 1001px; 
    }
}
@media (max-width: 1150px) {
    .LSD-Blog-Container {
        max-width: 100%;
    }
}

@media (max-width: 1150px){
    .LSD-Blog-Container {
        padding-left: 3em;
        padding-right: 3em;
    }
}

@media (max-width: 1300px){
    .LSD-Blog-Container {
        max-width: 1000px;
    }
}

.LSD-entry {
    padding-top: 42px;
    padding-bottom: 42px;
    line-height: 1.7;
    word-break: break-word;
}
/*end BLog css*/


/*print ModalLarge*/
@media print {
    body * {
        visibility: hidden;
    }

    #section-to-print, #section-to-print * {
        visibility: visible;
    }

    #section-to-print {
        position: absolute;
        left: 0;
        top: 0;
    }
}

    /*_________end LSD_____________*/