/*EV INTE HA KVAR????    */
  /*  .t_dashbord {border-color: rgba(29, 188, 191, 1.0) !important;  }*/
    .t_overview {border-color: rgba(139, 139, 139, 1.0) !important;  }
        .sitemap .t_dashbord {box-shadow: inset 0px -10px 0px 0 rgba(29, 188, 191, 1.0);}
        /*.sitemap .t_dashbord:hover {background-color: rgba(29, 188, 191, 1.0);}*/

    .t_organization {border-color: rgba(125, 209, 49, 1.0) !important;}
        .sitemap .t_organization {box-shadow: inset 0px -10px 0px 0 rgba(125, 209, 49, 1.0);}
        /*.sitemap .t_organization:hover {background-color: rgba(125, 209, 49, 1.0);}*/

    .t_budget {border-left-color: rgba(49, 145, 229, 1.0) !important;}
        .sitemap .t_budget {box-shadow: inset 0px -10px 0px 0 rgba(49, 145, 229, 1.0);}
        /*.sitemap .t_budget:hover {background-color: rgba(49, 145, 229, 1.0);}*/
    
    .t_products {border-color: rgba(209, 165, 45, 1.0) !important;}
        .sitemap .t_products {box-shadow: inset 0px -10px 0px 0 rgba(209, 165, 45, 1.0);}
        /*.sitemap .t_products:hover {background-color: rgba(209, 165, 45, 1.0);}*/

    .t_portfolio {border-color: rgba(209, 165, 45, 1.0) !important;}
        .sitemap .t_portfolio {box-shadow: inset 0px -10px 0px 0 rgba(209, 165, 45, 1.0);}
    
    .t_statistics {border-color: rgba(208, 94, 44, 1.0) !important;}
        .sitemap .t_statistics {box-shadow: inset 0px -10px 0px 0 rgba(208, 94, 44, 1.0);}
        /*.sitemap .t_statistics:hover {background-color: rgba(208, 94, 44, 1.0);}*/
    
    .t_social {border-color: rgba(29, 188, 191, 1.0) !important;}
        .sitemap .t_social {box-shadow: inset 0px -10px 0px 0 rgba(29, 188, 191, 1.0);}
        /*.sitemap .t_social:hover {background-color: rgba(29, 188, 191, 1.0);}*/

    .t_settings {border-color: rgba(169, 55, 44, 1.0) !important;}
        .sitemap .t_settings {box-shadow: inset 0px -10px 0px 0 rgba(207, 41, 56, 1.0);}
        /*.sitemap .t_admin:hover {background-color: rgba(207, 41, 56, 1.0);}*/

    .t_admin {border-color: rgba(207, 41, 56, 1.0) !important;}
        .sitemap .t_admin {box-shadow: inset 0px -10px 0px 0 rgba(207, 41, 56, 1.0);}
        /*.sitemap .t_admin:hover {background-color: rgba(207, 41, 56, 1.0);}*/


/*LAYOUT NOT SIGNED IN*/

:root {
    --header-height: 60px;
    --main-font-size: 0.95rem;
    --main-line-height: 1.3rem;
}

body {background-color: #ededed;}

h1 {font-size: 1.9rem; font-weight:bold;}
h2 {font-size: 1.45rem; color: rgb(80, 80, 80); }
h3 {font-size: 1.3rem; margin: 5px auto 5px auto; color: rgb(48, 136, 155); }
h4 {margin: 5px auto 5px auto; }
a, a:visited {color: rgb(29, 125, 147);}
a:hover {color: rgb(40, 40, 40);}

.contents{
    display:contents;
}

/*.sback {
    overflow:hidden;
    position:relative;
}*/
.sback::before {
    content: "";
    /*position: absolute;*/
    position: fixed;
    /*    display: block;*/
    z-index: -1;
    width: 100%;
    min-height: 100%;
    background: linear-gradient(100deg,#0aa2b6,#e88bed,#77a73b);
    background-size: 150% 150%;
    animation: gradient-animation 30s ease infinite;
    opacity: 15%;
}

@keyframes gradient-animation {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 100%;}
    100% {background-position: 0% 50%;}
}
/*@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}*/

/*Testar att ta bort för index topp som istället får klassen flexcontainer*/
/*header .container{ display:flex;}*/
.container {max-width: 1400px;}

.site-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    /*justify-content: space-between;*/
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--header-height);
    padding: 0;
    background: linear-gradient(0deg, rgba(50,50,50,1) 0%, rgba(90,90,90,1) 100%);
    box-shadow: 0px 5px 5px rgba(0,0,0,.15);
}

    main:not(.indialog) {
        /* box-shadow: inset 0 15px 15px -15px #2c3e50, inset 0 -15px 15px -15px #2c3e50;*/
        padding: 0px;
        min-height: calc(100vh - 140px); /*(för att få footern i botten)*/
    }

    /*TEST
        main::before { 
        content: "";
        position:absolute;
        z-index:1;*/
        /*    background: #ffffff url(/images/backgrounds/color_quad.png) no-repeat center center;*/
        /*background-color: blue;
        background-size: cover;*/
        /*  background-attachment: fixed;*/
        /*transition: background-image ease-in-out 0.3s;
        min-width: 100%;
        min-height: 100%;}*/

footer {
    position: relative;
    bottom: 0px;
    width: 100%;
    background-color: #262a2e;
    color: var(--text-color-ondark);
    font-size: var(--main-font-size);
    padding: 30px 0px;
    box-shadow: 0px -5px 5px rgba(0,0,0,.15);
    min-height: 80px;
}
    footer a, footer a:visited {
        color: var(--text-color-ondark);
        text-decoration: none;
    }
        footer a:hover {
            color: rgb(165 165 165);
        }


/*.login-box ----------------------------*/

@keyframes login-gradient-anim {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%; }
}

.login-box {
    /*    padding: 10px 10px 0px 10px;*/
    padding: 30px;
    margin: 80px auto 80px auto;
    border-radius: 10px;
    box-shadow: 0px 1px 8px 0px rgba(40,40,40,0.2);
    text-align: center;
    max-width: 750px;
    /*Static gradient background*/
    /*background: linear-gradient(4deg, rgba(245, 245, 245, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);*/
    /*Animated gradient background*/
    background: linear-gradient(20deg, rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 1.9), rgba(245, 245, 245, 1.95),rgba(245, 245, 245, 1.95), rgba(235, 235, 235, 1.75), rgba(255, 255, 255, 1.9),rgba(255, 255, 255, 1.9), rgba(235, 235, 235, 1.75), rgba(255, 255, 255, 1.9), rgba(245, 245, 245, 1.95),rgba(255, 255, 255, 1.9));
    background-size: 400% 400%;
    animation: login-gradient-anim 60s ease infinite;
}

.login-box .contentdiv {
    width:100%;
    padding:10px 0px 10px 0px;
}
    .login-box .contentdiv.left {text-align:left;}

/*.login-box .btncontainer {}*/

.login-box .btn {
    background-color: rgba(0,0,0,0.6);
    width: auto;
    min-width: 250px;
    height: 70px;
    border: 0px solid transparent;
    box-shadow: 0px 2px 8px 0px rgba(40,40,40,0.2);
    transition: transform ease-in-out 0.1s;
    border-radius: 40px;
    font-size: 1.1rem;
}
        .login-box .btn.login, .login-box .btn.regnext{
            background: rgba(69, 148, 165, 1.0);
            background: linear-gradient(8deg, rgb(67, 157, 177) 0%, rgb(112, 185, 202) 100%);
        }
        .login-box .btn.register {
            background: rgba(68, 128, 141, 1.0);
            background: linear-gradient(8deg, rgb(68, 128, 141) 0%, rgb(69, 148, 165) 100%);
        }
        .login-box .btn.accept {
            background: rgba(125, 209, 49, 1.0);
            background: linear-gradient(8deg, rgb(91, 148, 61) 0%, rgb(130, 200, 88) 100%);
        }
        .login-box .btn:hover, .login-box .btn:active {
            transform: translateY(-2px);
            box-shadow: 0px 5px 8px 0px rgba(40,40,40,0.3);
            filter:brightness(110%);
        }


/*INDEX login-box text specials ----------------------------*/

.note_discrete {
    font-size: var(--main-font-size_s);
    color: rgb(157, 166, 170);
    padding: 4px;
    display: block;
    font-style: italic;
    margin-top: -15px;
}

    .note_discrete.tempname {
        margin-top: -15px;
    }

.login-box .user-role {
    font-style: italic;
    color: #548713;
}


/*----------------------------*/

.content-box-site {
    box-shadow: 0px 1px 8px 0px rgba(80,80,80,0.4);
    margin: 20px auto; /* (auto förut men ställer till flex items i avtal)*/
    border-radius: 8px 8px 4px 4px;
    background-color: rgba(250,250,250,0.9);
    min-height: 100px; /* (Nyinlagt, kan ställa till)*/
}

.content-padd-x2 {
    padding: 20px;
}

/* ORGLIST ----------------------------*/

.org-container {
    height:auto;
    margin: 0px auto;
/*    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 1px 8px 0px rgba(40,40,40,0.2);
    max-width: 1400px;
    background: linear-gradient(20deg, rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 1.9), rgba(245, 245, 245, 1.95),rgba(245, 245, 245, 1.95), rgba(235, 235, 235, 1.75), rgba(255, 255, 255, 1.9),rgba(255, 255, 255, 1.9), rgba(235, 235, 235, 1.75), rgba(255, 255, 255, 1.9), rgba(245, 245, 245, 1.95),rgba(255, 255, 255, 1.9));
    background-size: 400% 400%;
    animation: login-gradient-anim 60s ease infinite;*/
}
    .sorgtitle {
    text-align: center;
}
        .orglist { list-style:none; margin-top:40px; margin-bottom:40px;}

            .orglist li {
                width: 33%;
                text-align: center;
                padding: 10px 10px;
            }

            .orglist .orglogo {
                max-height:100%;
                /* max-width:70px; */
                vertical-align:middle;
                padding-right:10px;
                /* display:inline-block; */
            }

            .orglist .btn {
                height: 90px;
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0px 1px 4px 0px rgba(40,40,40,0.2);
                max-width: 500px;
                background: linear-gradient(5deg, rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 1.0));
                /*    background: linear-gradient(20deg, rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 1.9), rgba(245, 245, 245, 1.95),rgba(245, 245, 245, 1.95), rgba(235, 235, 235, 1.75), rgba(255, 255, 255, 1.9),rgba(255, 255, 255, 1.9), rgba(235, 235, 235, 1.75), rgba(255, 255, 255, 1.9), rgba(245, 245, 245, 1.95),rgba(255, 255, 255, 1.9));
    background-size: 400% 400%;
    animation: login-gradient-anim 60s ease infinite;*/
            }

            .orglist .btn.on_bright:hover { background: linear-gradient(5deg, rgba(225, 225, 225, 1.0), rgba(235, 235, 235, 1.0))}


/*MEDIA -------------------------------------------
--------------------------------------------------*/

@media screen and (max-width:850px) {
    h1 {font-size: 1.65rem;}
    h2 {font-size: 1.3rem;}
    h3 {font-size: 1.1rem;}

    .orglist li { width: 50%;}
}

@media screen and (max-width:550px) {

    .login-box {
        padding: 15px;
        margin: 40px auto 0px auto;
        max-width: 750px;
    }
    .orglist li { width: 100%;}
}

@media screen and (max-width:450px) {
    .login-box .btn {
        min-width: 80%;
        height: 60px;
        border-radius: 30px;
        font-size: 1.0rem;
    }
}