/*********************************************************************************
 * SugarCRM Community Edition is a customer relationship management program developed by
 * SugarCRM, Inc. Copyright (C) 2004-2013 SugarCRM Inc.

 * SuiteCRM is an extension to SugarCRM Community Edition developed by Salesagility Ltd.
 * Copyright (C) 2011 - 2014 Salesagility Ltd.
 *
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY SUGARCRM, SUGARCRM DISCLAIMS THE WARRANTY
 * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 *
 * 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 Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along with
 * this program; if not, see http://www.gnu.org/licenses or write to the Free
 * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 * 02110-1301 USA.
 *
 * You can contact SugarCRM, Inc. headquarters at 10050 North Wolfe Road,
 * SW2-130, Cupertino, CA 95014, USA. or at email address contact@sugarcrm.com.
 *
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU Affero General Public License version 3.
 *
 * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * SugarCRM" logo and "Supercharged by SuiteCRM" logo. If the display of the logos is not
 * reasonably feasible for  technical reasons, the Appropriate Legal Notices must
 * display the words  "Powered by SugarCRM" and "Supercharged by SuiteCRM".
 ********************************************************************************/

/* Custom Code */


body{
    background-image: url("../../../themes/SuiteP/images/bg_texture.png");
    font-size: 11px;
}

::-webkit-input-placeholder {  /*Chrome */
    color: #388FFF;
}
:-ms-input-placeholder {  /*IE 10+*/ 
    color: #388FFF;
}
::-moz-placeholder {  /*Firefox 19+ */
    color: #388FFF;
    opacity: 1;
}
:-moz-placeholder {  /*Firefox 4 - 18*/ 
    color: #388FFF;
    opacity: 1;
}        

.login-page {

    padding: 8% 0 0;
    margin: auto;
}
.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;

    margin: 0 auto 100px;
    padding: 60px 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    top:150px;
}
/*.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}*/


.form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
}
.form .message a {
    text-decoration: none;
}
.form .form-signin {
    display: none;
}
.container {
    position: relative;
    z-index: 1;

    margin: 0 auto;
}
.container:before, .container:after {
    content: "";
    display: block;
    clear: both;
}
.container .info {
    margin: 50px auto;
    text-align: center;
}
.container .info h1 {
    margin: 0 0 15px;
    padding: 0;
    font-size: 36px;
    font-weight: 300;
    color: #1a1a1a;
}
.container .info span {
    color: #4d4d4d;
    font-size: 12px;
}
.container .info span a {
    color: #000000;
    text-decoration: none;
}
.container .info span .fa {
    color: #EF3B3A;
}
#logo-div{
    width:100%;
    margin:auto;
}
#logo{

    padding:0px 10px 20px 10px;
    width:100%;
    max-height: 100px;
}

input[type="text"], input[type="password"], textarea {
    background: #fbfbfb;
    border:1px solid #ddd;
    border-left: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.input-group-addon {
    background-color:#fbfbfb;
    border:1px solid #ddd;
    color:#4B8BF4;
}
.button, input[type="button"], input[type="reset"], input[type="submit"], .btn, .btn-primary{
    color:#fff !important;
    /*background-color: #2767A8 !important;*/
}
.btn:hover, .btn-primary:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover{
    color: #fff !important;
    /*background-color: #286090 !important;*/
    /*border-color: #204d74 !important;*/
}
.card{
    padding: 5px;
    padding-bottom: 10px;
    min-height: 140px;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    position:relative;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    margin-bottom: 5px;

}
.card img{
    height:60px;
    weight:60px;
    display:box;
    box-shadow: 0px 0px 1px 1px #ddd;
    margin:5px;
}
.card .headings{
    font-size:14px;
    font-weight:bold;
}
div.input-group input {

    margin: unset;
    margin-bottom: unset;
    min-width: unset !important;
    max-width: unset !important;

}
input[type="text"], input[type="password"] {
    padding: 10px !important;

}
/*.button, input[type="submit"], input[type="button"]{
    padding:15px;
}*/

/*Font size of login page and reset password page*/
.loginfontset{
    font-size:16px !important;
    height:46px !important;
    -ms-position:absolute !important;
}
.blue_box,.red_box,.green_box,.yellow_box{
    position: absolute;
}

.blue_box img{
    width: 670px;margin: 34px 0 0 197px;
}
.red_box img{
    width: 381px;margin: 260px 0px 0px 216px;
}
.green_box img{
    width: 377px;margin: 334px 0 0 470px;

}
.yellow_box img{
    width: 400px;margin: 158px 0px 0px 479px;
}

/* Removal of 3d Animation in Login pages as Suggested, Modified By Swapnil 4th May 2020 START
.bounce-in-bck-1 {
    -webkit-animation: bounce-in-bck 2s both;
    animation: bounce-in-bck 2s both;
    -webkit-animation-delay: 0;
    animation-delay:  0;
}
.bounce-in-bck-2 {
    -webkit-animation: bounce-in-bck 2s both;
    animation: bounce-in-bck 2s both;
    -webkit-animation-delay: 0.3s;
    animation-delay:  0.3s;
}
.bounce-in-bck-3 {
    -webkit-animation: bounce-in-bck 2s both;
    animation: bounce-in-bck 2s both;
    -webkit-animation-delay: 0.6s;
    animation-delay:  0.6s;
}
.bounce-in-bck-4 {
    -webkit-animation: bounce-in-bck 2s both;
    animation: bounce-in-bck 2s both;
    -webkit-animation-delay: 1s;
    animation-delay:  1s;
}

.puff-in-center {
    -webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
    -webkit-animation-delay: 1.5s;
    animation-delay:  1.5s;
}

/* ----------------------------------------------
 * Generated by Animista on 2019-11-9 10:16:37
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-bck
 * ----------------------------------------
 *
@-webkit-keyframes bounce-in-bck {
    0% {
        -webkit-transform: scale(7);
        transform: scale(7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: scale(1.24);
        transform: scale(1.24);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    89% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: scale(1.04);
        transform: scale(1.04);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes bounce-in-bck {
    0% {
        -webkit-transform: scale(7);
        transform: scale(7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    72% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    81% {
        -webkit-transform: scale(1.24);
        transform: scale(1.24);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    89% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    95% {
        -webkit-transform: scale(1.04);
        transform: scale(1.04);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

/* ----------------------------------------------
 * Generated by Animista on 2019-11-9 12:0:16
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation puff-in-center
 * ----------------------------------------
 *
@-webkit-keyframes puff-in-center {
    0% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
@keyframes puff-in-center {
    0% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
Removal of 3d Animation in Login pages as Suggested, Modified By Swapnil 4th May 2020 STOP
*/

/* CSS changes by Ritesh for responsive login page START */
.login-page{margin-top: -5%;}
/* ------------------ MOBILE START ------------------------------- */

/* Portrait and Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    
    .blue_box img{
        width: 194%;
        margin: 31% 0 0 -40%;
    }
    .red_box img {
        width: 150%; 
    margin: 75% 0px 0px -45%;
    }
    .yellow_box img {
        width: 150%;
        margin: 30% 0px 0px 1%;
    }
    .green_box img {
        width: 100%;
        margin: 127% 0 0 55%;
    }
}

/* Portrait */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .login-page{margin-top: -15%;}

}

/* Landscape */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .blue_box img{
        width: 194%;
        margin: 31% 0 0 -40%;
    }
    .red_box img {
        width: 150%; 
    margin: 75% 0px 0px -45%;
    }
    .yellow_box img {
        width: 150%;
        margin: 30% 0px 0px 1%;
    }
    .green_box img {
        width: 100%;
        margin: 127% 0 0 55%;
    }
}

/* ----------------------- MOBILE END -------------------------------- */
/* ----------------------- TABLET START ------------------------------ */
/* Portrait and Landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
    /*.blue_box img{margin: 26px 0 0 27px;; width: 673px;}
    .red_box img{ width: 450px;  margin: 218px 0px 0px 0px;}
    .yellow_box img{width: 450px;margin: 105px 0px 0px 215px;}
    .green_box img{width: 374px; margin: 304px 0 0 347px;}*/

    .blue_box img{   margin: 10px 0 0 -15px;
    width: 720px;}

    .red_box img{width: 450px;
    margin: 226px 0px 0px -30px;}
    .yellow_box img{width: 450px;margin: 105px 0px 0px 215px;}
    .green_box img{width: 374px; margin: 304px 0 0 347px;}
}


/* Landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    .blue_box img{ margin: 62px 0 0 190px;    width: 550px; }
    .red_box img{width: 358px;
    margin: 273px 0px 0px 183px;}
    .yellow_box img{width: 450px;
    margin: 117px 0px 0px 270px;}
    .green_box img{width: 340px;
    margin: 305px 0 0 432px}


}

/* ----------------------- TABLET END ------------------------------ */

/* ------------------- LAPTOP START -------------------------------- */
/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) {    
    .login-page{margin-top: -10%;}
}
/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
    .login-page{margin-top: -10%;}
}
/* ------------------- LAPTOP END -------------------------------- */
/* CSS changes by Ritesh for responsive login page END */