*{
Box-Sizing: Border-Box;
}

Body{
Margin: 0;
Font-Family: Poppins, Arial, Helvetica, Sans-Serif;
Font-Size: 16px;
Font-Weight: 400;
Color: #666666;
Background: #Eaeff4;
}

.Wrapper{
Margin: 0 Auto;
Width: 100%;
Max-Width: 1140px;
Min-Height: 100vh;
Display: Flex;
Align-Items: Center;
Justify-Content: Center;
Flex-Direction: Column;
}

.Container{
Position: Relative;
Width: 100%;
Max-Width: 600px;
Height: Auto;
Display: Flex;
Background: #Ffffff;
Box-Shadow: 0 0 5px #999999;
}



.Login .Col-Left,
.Login .Col-Right{
Padding: 30px;
Display: Flex;
}


.Login .Col-Left{
    Width: 60%;
    Clip-Path: Polygon(0 0, 0% 100%, 100% 0 );
    Background: #333366;
    }

    .Login .Col-Right{
    Padding: 60px 30px;
    Width: 50%;
    Margin-Left: -10%;
    }


    @Media(Max-Width: 575px){
        .Login .Container{
        Flex-Direction: Column;
        Box-Shadow: None;
        }
        .Login .Col-Left,
        .Login .Col-Right{
        Width: 100%;
        Margin: 0;
        Clip-Path: None;
        }
        .Login .Col-Right{
        Padding: 30px;
        }

        }


        .Login .Login-Text{
        Position: Relative;
        Width: 100%;
        Color: #Ffffff;
        }

        .Login .Login-Text H2{
        Margin: 0 0 15px 0;
        Font-Size: 30px;
        Font-Weight: 700;
        }

        .Login .Login-Text P{
        Margin: 0 0 20px 0;
        Font-Size: 16px;
        Font-Weight: 500;
        Line-Height: 22px;
        }

        .Login .Login-Text .Btn{
        Display: Inline-Block;
        Font-Family: Poppins;
        Padding: 7px 20px;
        Font-Size: 16px;
        Letter-Spacing: 1px;
        Text-Decoration: None;
        Border-Radius: 30px;
        Color: #Ffffff;
        Outline: None;
        Border: 1px Solid #Ffffff;
        Box-Shadow: Inset 0 0 0 0 #Ffffff;
        Transition: .3s;
        }

        .Login .Login-Text .Btn:hover{
        Color: #333366;
        Box-Shadow: Inset 150px 0 0 0 #Ffffff;
        }

        .Login .Login-Form{
        Position: Relative;
        Width: 100%;
        }
        .Login .Login-Form H2{
        Margin: 0 0 15px 0;
        Font-Size: 22px;
        Font-Weight: 700;
        }
        .Login .Login-Form P{
        Margin: 0 0 10px 0;
        Text-Align: Left;
        Color: #666666;
        Font-Size: 15px;
        }
        .Login .Login-Form P:last-Child{
        Margin: 0;
        Padding-Top: 3px;
        }
        .Login .Login-Form P A{
        Color: #333366;
        Font-Size: 14px;
        Text-Decoration: None;
        }
        .Login .Login-Form Label {
        Display: Block;
        Width: 100%;
        Margin-Bottom: 2px;
        Letter-Spacing: .5px;
        }
        .Login .Login-Form P:last-Child Label{
        Width: 60%;
        Float: Left;
        }
        .Login .Login-Form Label Span{
        Color: #Ff574e;
        Padding-Left: 2px;
        }
        .Login .Login-Form Input{
        Display: Block;
        Width: 100%;
        Height: 35px;
        Padding: 0 10px;
        Outline: None;
        Border: 1px Solid #Cccccc;
        Border-Radius: 30px;
        }
        .Login .Login-Form Input:focus{
        Border-Color: #Ff574e;
        }
        .Login .Login-Form Button,
        .Login .Login-Form Input[Type=Submit] {
        Display: Inline-Block;
        Width: 100%;
        Margin-Top: 5px;
        Color: #333366;
        Font-Size: 16px;
        Letter-Spacing: 1px;
        Cursor: Pointer;
        Background: Transparent;
        Border: 1px Solid #333366;
        Border-Radius: 30px;
        Box-Shadow: Inset 0 0 0 0 #333366;
        Transition: .3s;
        }
        .Login .Login-Form Button:hover,
        .Login .Login-Form Input[Type=Submit]:Hover{
        Color: #Ffffff;
        Box-Shadow: Inset 250px 0 0 0 #333366;
        }

        @Import Url('Https://Fonts.Googleapis.Com/Css2?Family=Poppins&Display=Swap');
* {
    Box-Sizing: Border-Box;
}

Body {
    Margin: 0;
    Font-Family: Poppins, Arial, Helvetica, Sans-Serif;
    Font-Size: 16px;
    Font-Weight: 400;
    Color: #666666;
    Background: #Eaeff4;
}

.Wrapper {
    Margin: 0 Auto;
    Width: 100%;
    Max-Width: 1140px;
    Min-Height: 100vh;
    Display: Flex;
    Align-Items: Center;
    Justify-Content: Center;
    Flex-Direction: Column;
}

.Container {
    Position: Relative;
    Width: 100%;
    Max-Width: 600px;
    Height: Auto;
    Display: Flex;
    Background: #Ffffff;
    Box-Shadow: 0 0 5px #999999;
}

.Login .Col-Left,
.Login .Col-Right {
    Padding: 30px;
    Display: Flex;
}

.Login .Col-Left {
    Width: 60%;
    Clip-Path: Polygon(0 0, 0% 100%, 100% 0);
    Background: #333366;
}

.Login .Col-Right {
    Padding: 60px 30px;
    Width: 50%;
    Margin-Left: -10%;
}

@Media(Max-Width: 575px) {
    .Login .Container {
        Flex-Direction: Column;
        Box-Shadow: None;
    }
    .Login .Col-Left,
    .Login .Col-Right {
        Width: 100%;
        Margin: 0;
        Clip-Path: None;
    }
    .Login .Col-Right {
        Padding: 30px;
    }
}