/*
Theme Name: Time Tracker Landing Page
Description: Landing page for Time Tracker Sites
*/

@media only screen and (max-width: 600px){
    body{
        flex-direction: column !important;
    }
}

body{
    margin: 0px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    font-family: 'Work Sans', sans-serif !important;
}


/* Sidebar */
@media only screen and (max-width: 600px){
    .LPsidebar{
        width: 100% !important;
    }
    .LPmenu{
        display: none !important;
    }
    .LPheader{
        text-align: center;
    }
    .LPheader > svg{
        height: 4rem !important;
    }
}


    .LPsidebar{
        width: 15rem;
        background: rgb(47, 49, 51);
    }

    .LPheader{
        height: 5rem;
    }

    .LPheader > a > svg{
        padding: 1em;
        fill: white;
    }


    .LPmenu{
        height: calc(50% - 2.5rem);
        display: flex;
        align-items: center;

        flex-direction: column;
    }
    .LPaccount{
        justify-content: flex-end;
    }
    .LPMain{
        justify-content: flex-start;
    }
    .LPmenu-item{
        background: linear-gradient(90deg, rgba(226,101,202,1) 0%, rgba(0,212,255,1) 100%);
        width: 90%;
        height: 2em;
        border-radius: 1em;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1em;
        cursor: pointer;
    }



/* Content */
@media only screen and (max-width: 600px){
    .LPcontent{
        height: 100%;
    }
    .LPcontainer{
        flex-direction: column !important;
    }
    .LPsplit{
        width: 90% !important;
    }

    .LPright-login{
        border-top-right-radius: 0px !important;
        border-bottom-left-radius: 2em !important;
    }
    .LPleft-text{
        border-top-right-radius: 2em !important;
        border-bottom-left-radius: 0px !important;
    }

    .blog-list{
        transform: translate(-50%, -50%) !important;
        max-width: 15rem;
    }
}

.login-action-login,
.LPcontent{
    background: linear-gradient(-45deg, #ff5cff, #b536ff, #2782eb, #1ab6ff);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
    
    background-size: 400% 400%;

    -webkit-animation: gradient 15s ease infinite;
    -moz-animation: gradient 15s ease infinite;
    animation: gradient 15s ease infinite;

    width: -webkit-fill-available;
    width: -moz-available;

    overflow-y: scroll;
}

@-webkit-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.LPcontainer{
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 100vh;
    width: -webkit-fill-available;
    width: -moz-available;
    align-content: center;
    align-items: center;
}

.LPsplit{
    min-width: 13em;
    max-width: 20em;
    width: -webkit-fill-available;
    width: -moz-available;
    height: 20em;
    display: flex;
}

/* Landing page */
.LPright-login{
    background-color: #ffffff6e;
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
}

.LPfindLogin{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-left: 0px;
}
.LPfindLogin >input{
    width: 90%;
    height: 2em;
    border-radius: 1em;
    border: none;
    margin-top: 1em;
    text-align: center;
}

#findsites{
    background-color: #71ff11;
}

.LPleft-text{
    background-color: rgb(255 255 255 / 76%);
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
    margin-right: 0px;
}

.LPwelcometext{
    padding: 1em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.blog-list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-30%, -50%);
    background-color: white;
    display: flex;
    flex-direction: column;
    width: 20rem;
    align-items: center;
    padding: 2em;
    border-radius: 2em;
}
.blog-list > span{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/*############################################ Settings page ##############################################*/

.settings-container{
    width: 90%;
    height: 90%;
    background-color: #ffffff6e;
    border-radius: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: flex-start;
}


.settings-section{
    /*width: 41%;*/
    min-width: 23rem;
    background-color: rgb(255 255 255 / 76%);
    margin: 1em;
    border-radius: 2em;
    padding: 1em;
}
#api-clients-container > form{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
table#thirdpartyapps {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    table-layout: fixed;

}
table#thirdpartyapps > thead > tr{
    border-bottom: 2px black solid;
}
table#thirdpartyapps table > thead th, tbody td {
    word-wrap: anywhere;
}

/*Swagger adjustments*/
.renderedMarkdown,
.swagger-ui .response-col_links{
    color: white !important;
}
.swagger-ui .opblock.opblock-get {
    border-color: #DADFE1;
    background: rgb(39, 40, 34);
}
.model-container,
.swagger-ui > div:nth-child(2) > div:nth-child(4) > section > section{
    background: rgb(39, 40, 34);
    margin: 0 0 15px;
    border: 1px solid #DADFE1;
    border-radius: 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .19);
}
.swagger-ui > div:nth-child(2) > div:nth-child(4) > section > section *{
    color: white !important;
}
.model-toggle:after{
    backdrop-filter: invert(1);
}

*:focus {
    outline: 2px solid white !important;
    box-shadow: none;
}