/* OTOBO is a web-based ticketing system for service organisations.

Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
Copyright (C) 2019-2024 Rother OSS GmbH, https://otobo.io/

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
*/

#oooMobileHeader,
#oooIE,
#oooFooter {
    display: none;
}

@supports (display: grid) {
    #oooNoGrid {
        display: none;
    }
}

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

    #oooLoginBG {
        display: none;
    }

    #MainBox {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        min-width: 320px;
        height: 100vh;
        min-height: 768px;
        padding: 0px;
        border-bottom-right-radius: 20px;
        background-color: #ffffff;
        overflow: hidden;
    }

	#Slider {
    	min-height: calc( 692px - 10% );
	}

    @media only screen and (min-width: 448px) {

        #Slider {
            max-width: calc( 50% + 128px );
        }

        #Slider,
        .SuccessBox > p,
        .WarningBox > p,
        .ErrorBox > p {
            margin-left: calc( 25% - 112px );
            margin-right: calc( 25% - 112px );
        }
    
    }
}

@media only screen and (min-width: 1024px) {

    #oooLoginBG {
        position: absolute;
        top: 0;
        right: 0;
        width: 69vw;
        height: 100vh;
        min-height: 768px;
        background-color: #00023c;
        background-color: var(--colMainDark);
    }

    #oooLoginBG > .oooBG {
        position: relative;
        width: 100%;
        height: 100%;
        background-size: cover;
		overflow: hidden;
    }

	#oooLoginBG > h1 {
		position: absolute;
		bottom: calc( 4% + 24px );
		left: 38.5vw;
    	transform: translateX(-50%);
		white-space: nowrap;
		color: #e41d32;
        line-height: 1;
	}

    #oooBGSignet {
		position: relative;
		left: 15.6%;
		top: -5mm;
        width: 150%;
        height: 140%;
        background-size: cover;
		opacity: 0.1;
    }

    #MainBox {
        position: absolute;
        top: 0;
        left: 0;
        width: 35vw;
        min-width: 358px;
        height: 100vh;
        min-height: 768px;
        padding: 0px;
        border-bottom-right-radius: 20px;
        background-color: #ffffff;
    }

	#Slider {
    	min-height: calc( 692px - 10% );
	}

}

@media only screen and (max-width: 1279) {

    .Row {
        width: 100%;
        margin: 0;
    }

}

@media only screen and (min-width: 1280px) {

    #Slider {
        max-width: calc( 50% + 128px );
    }

    #Slider,
    .SuccessBox > p,
    .WarningBox > p,
    .ErrorBox > p {
        margin-left: calc( 25% - 112px );
        margin-right: calc( 25% - 112px );
    }

}

#NoJavaScript,
#OldBrowser,
#oooNoGrid {
    position: relative;
    border-radius: 10px;
    padding: 16px;
    padding-left: 48px;
    padding-right: 48px;
    background-color: #f9bcb2;
    background-color: var(--colNotifyErr);
    z-index: 500;
}

#oooSignet {
    position: relative;
    top: calc( 5% + 24px );
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 350px;
    object-fit: contain;
}

.SuccessBox,
.WarningBox,
.ErrorBox {
    position: relative;
    top: calc( 2% + 24px );
    display: block;
    padding-left: 48px;
    padding-right: 48px;
}

.SuccessBox > p,
.WarningBox > p,
.ErrorBox > p {
    border-radius: 10px;
    padding: 16px;
    text-overflow: ellipsis;
    z-index: 100;
    opacity: 0.96;
}

.SuccessBox > p {
    background-color: #c4cdfa;
    background-color: var(--colNotifyOK);
}

.WarningBox > p {
    background-color: #fffccc;
    background-color: var(--colNotifyWarn);
}

.ErrorBox > p {
    background-color: #f9bcb2;
    background-color: var(--colNotifyErr);
}

/**
 * @subsection  Slider
 */
#Slider {
    position: relative;
    bottom: 0;
    width: calc( 100% - 96px );
    height: calc( 90vh - 76px );
    padding-left: 48px;
    padding-right: 48px;
    text-align: center;
}

#SlideArea,
#Login {
    height: 100%;
}

#OldBrowser,
#Signup,
#Reset {
    display: none;
}

.Row > input {
    display: inline-block;
    height: 56px;
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.4px;
    text-align: left;
    color: #7f809d;
    color: var(--colTextLight);
    width: calc( 100% - 32px );
    border-radius: 10px;
    background-color: #f7f7f9;
    background-color: var(--colBGLight);
    padding: 0px;
    padding-left: 32px;
    border: solid 1px rgba(247, 247, 249, 0);
    border: solid 1px var(--colBGLight);
-webkit-transition: border 0.2s ease;
   -moz-transition: border 0.2s ease;
     -o-transition: border 0.2s ease;
        transition: border 0.2s ease;
}

.Row > input:hover,
.Row > input.oooFull {
    border: solid 1px #7f809d;
    border: solid 1px var(--colTextLight);
    background-color: #fff;
}

.Row > input:focus,
.Row > input.oooFull:focus {
    border: solid 1px #001bff;
    border: solid 1px var(--colMainLight);
    background-color: #fff;
    color: #001bff;
    color: var(--colMainLight);
}

label {
    left: calc( -100% + 24px );
}

/**
 *@subsection  Login
 */

.Option {
    margin-top: 16px;
    text-align: right;
}

#oooRegister {
    position: absolute;
    bottom: calc( 4% + 24px );
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
}

#Login button {
    width: 100%;
}

/**
 *@subsection  Reset
 */

#oooConfirmation {
	display: none;
	margin-top: 24px;
}

/* IE */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    #oooIE {
        display: block;
    }
    #oooNoGrid {
        display: none;
    }

    /* Edge */
    @supports (display: grid) {
        #oooIE {
            display: none;
        }
    }
}