@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
    @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

    ul, li, div, a, img, table,
    tr, td, input, textarea, select { box-sizing: border-box; outline:none; }
    a, a:link, a:hover              { cursor:pointer; text-decoration:none; }
    a:active                        { text-decoration:none; }
    ::-webkit-input-placeholder     { color:#999; }
    ::-moz-placeholder              { color:#999; }
    :-ms-input-placeholder          { color:#999; }
    :-moz-placeholder               { color:#999; }
    input[type="text"], textarea, select   { outline:none; background-color:#fff; }
    input[type=radio] { background:#fff !important; }
    input[type=checkbox] { background:#fff !important; }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button { opacity: 1; }

    table { border-collapse: collapse; }
    select {
        padding: 10px;
        margin: 0;
        color:#000;
        border:#dfdfdf 1px solid;
        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */
    }

    body            {
        background:#eaebf1;
        color:#333; font:400 14px 'Roboto', sans-serif;
        line-height:20px;
        margin:0; overflow-x:hidden;
        padding:0;
    }
    .transeffect    {
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }
    .img-responsive { width:auto; }  .DNone { display:block; }
    .col-lg-1_5     { width:20%; padding:0 15px; }
    hr              { border:none; border-top:#dfdfdf 1px dashed; margin:15px 0; }
    a               { color:#666; font:500 13px 'Roboto', sans-serif; cursor:pointer; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
    a:hover         { color:#333; text-decoration:underline; cursor:pointer; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
    a:active { text-decoration:none; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
    a:before { text-decoration:none; cursor:pointer; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }
    .ta-left        { text-align:left !important; }
    .ta-right       { text-align:right !important; }
    .ta-center      { text-align:center !important; }

    .va-top     { vertical-align:top !important; }
    .va-middle  { vertical-align:middle !important; }
    .va-bottom  { vertical-align:bottom !important; }

    .fullArea       {
        width:100%;
        height:100%;
        position:fixed;
        left:0;
        top:0;
        display:flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .container      { min-width:800px; max-width:800px; border-radius:10px; box-shadow: rgba(0, 0, 0, 0.1) 0 10px 50px; }

    .leftPanel, .rightPanel         { height:420px; }

    .leftPanel      { background:#fff; border-top-left-radius:10px; border-bottom-left-radius:10px; padding:50px; display:flex; align-items: center; }
    .leftPanel .kapsayan        { width:100%; }
    .leftPanel hr       { border-top:#efefef 1px solid; margin:20px 0; }
    .leftPanel span                 { color:#666; font:400 13px 'Gabarito', sans-serif; }
    .leftPanel input[type=text]     { width:100%; background:none; color:#000; font-size:11px; margin-bottom:15px; border:#efefef 1px solid; padding:12px 15px; border-radius:5px; }
    .leftPanel input[type=text]::placeholder     { color:#666; }
    .leftPanel input[type=password]     { width:100%; background:none; color:#000; font-size:11px; margin-bottom:15px; border:#efefef 1px solid; padding:12px 15px; border-radius:5px; }
    .leftPanel input[type=password]::placeholder     { color:#666; }
    .leftPanel input[type=submit]       { background:#efefef; color:#000; font-size:12px; font-weight:700; border:#fff 1px solid; padding:10px 50px; border-radius:5px; }
    .leftPanel input[type=submit]:hover         { background: rgb(189,28,172); color:#fff; background: linear-gradient(90deg, rgba(189,28,172,1) 0%, rgba(205,15,97,1) 25%, rgba(217,112,70,1) 50%, rgba(215,48,92,1) 100%); }
    .rightPanel     { background:url(../images/orca-login-bg.png) no-repeat center center; background-size: cover; border-top-right-radius:10px; border-bottom-right-radius:10px; }

    .alert{width:100%;padding:8px 12px;border-radius:5px;border-style:solid;border-width:0;margin:6px 0;font-size:12px}.alert.alert-success{background-color:#e3fdeb;border-color:#26b303;color:#3c763d}.alert.alert-info{background-color:#d9edf7;color:#31708f;border-color:#7eb6c1}.alert.alert-warning{background-color:#fcf8e3;border-color:#b1a181;color:#8a6d3b}.alert.alert-danger{background-color:#f8d7da;border-color:#dc3545;color:#721c24}

    .sincap_creative    { position:fixed; right:15px; bottom:15px; z-index:2; }

@media (max-width: 900px) {
    body            {
        padding:0 30px;
    }
    .fullArea       { padding:30px !important; }
    .container      { min-width:100%; max-width:100%; border-radius:10px; box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px; }
    .leftPanel      { background:#4258ff; border-radius:10px; padding:50px; display:flex; align-items: center; }
}