* {
    font-family: Calibri;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    background-image: url("../images/login/body-bg.png");
    font-size: 14px;
    position: relative;
}

#logo {
    text-align: center;
    background-image: url('../images/login/body-wrapper-bg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    height: 470px;
}

    #logo img {
        padding-top: 20px;
        width: 375px;
    }

/* LOGIN */

#login {
    color: #FDFFF5;
    position: absolute;
   /* margin-top: -119px;
    margin-left: -183px;
    top: 50%;
    left: 50%;*/

        top: calc(50% - 115px);
    left: calc(50% - 172px);
}

.shadow {
   -moz-box-shadow:    inset 0 0 10px #b1c13f;
   -webkit-box-shadow: inset 0 0 10px #b1c13f;
   box-shadow:         inset 0 0 10px #b1c13f;
}

    #login-form {
         color: #FDFFF5;
    position: absolute;
   /* margin-top: -119px;
    margin-left: -183px;
    top: 50%;
    left: 50%;*/

        top: calc(50% - 115px);
    left: calc(50% - 172px);


       /* background-image: url("../images/login/background.png");
        background-repeat: no-repeat;*/
       /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b1c13f+0,afcc00+0,a9ca01+5,a6c700+5,a0c202+9,9fc302+10,9cc001+11,9abf02+13,97bd00+13,92b900+16,92bb02+17,77ab04+22,6da300+23,88b501+23,6da001+23,6da300+23,6da200+24,6fa202+25,70a702+31,72a40a+32,86b81d+32,6da001+32,73a607+33,72a801+33,73aa00+34,7cb202+45,7eb200+45,7cb300+46,85b905+52,85ba03+53,8abc08+56,8abc06+57,8fc10b+61,94c311+63,97c410+65,9bc818+68,9bc816+68,9eca1b+69,9ecb19+70,a2cc1d+72,a2cf1f+74,a6d026+76,a7d125+78,aad329+79,aed42e+80,b1d735+85,b9db41+91,b8dd40+92,bbdd43+93,bcde46+98,bddf4a+100,c0d280+100 */
background: #b1c13f; /* Old browsers */
background: -moz-linear-gradient(top, #b1c13f 0%, #afcc00 0%, #a9ca01 5%, #a6c700 5%, #a0c202 9%, #9fc302 10%, #9cc001 11%, #9abf02 13%, #97bd00 13%, #92b900 16%, #92bb02 17%, #77ab04 22%, #6da300 23%, #88b501 23%, #6da001 23%, #6da300 23%, #6da200 24%, #6fa202 25%, #70a702 31%, #72a40a 32%, #86b81d 32%, #6da001 32%, #73a607 33%, #72a801 33%, #73aa00 34%, #7cb202 45%, #7eb200 45%, #7cb300 46%, #85b905 52%, #85ba03 53%, #8abc08 56%, #8abc06 57%, #8fc10b 61%, #94c311 63%, #97c410 65%, #9bc818 68%, #9bc816 68%, #9eca1b 69%, #9ecb19 70%, #a2cc1d 72%, #a2cf1f 74%, #a6d026 76%, #a7d125 78%, #aad329 79%, #aed42e 80%, #b1d735 85%, #b9db41 91%, #b8dd40 92%, #bbdd43 93%, #bcde46 98%, #bddf4a 100%, #c0d280 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b1c13f 0%,#afcc00 0%,#a9ca01 5%,#a6c700 5%,#a0c202 9%,#9fc302 10%,#9cc001 11%,#9abf02 13%,#97bd00 13%,#92b900 16%,#92bb02 17%,#77ab04 22%,#6da300 23%,#88b501 23%,#6da001 23%,#6da300 23%,#6da200 24%,#6fa202 25%,#70a702 31%,#72a40a 32%,#86b81d 32%,#6da001 32%,#73a607 33%,#72a801 33%,#73aa00 34%,#7cb202 45%,#7eb200 45%,#7cb300 46%,#85b905 52%,#85ba03 53%,#8abc08 56%,#8abc06 57%,#8fc10b 61%,#94c311 63%,#97c410 65%,#9bc818 68%,#9bc816 68%,#9eca1b 69%,#9ecb19 70%,#a2cc1d 72%,#a2cf1f 74%,#a6d026 76%,#a7d125 78%,#aad329 79%,#aed42e 80%,#b1d735 85%,#b9db41 91%,#b8dd40 92%,#bbdd43 93%,#bcde46 98%,#bddf4a 100%,#c0d280 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b1c13f 0%,#afcc00 0%,#a9ca01 5%,#a6c700 5%,#a0c202 9%,#9fc302 10%,#9cc001 11%,#9abf02 13%,#97bd00 13%,#92b900 16%,#92bb02 17%,#77ab04 22%,#6da300 23%,#88b501 23%,#6da001 23%,#6da300 23%,#6da200 24%,#6fa202 25%,#70a702 31%,#72a40a 32%,#86b81d 32%,#6da001 32%,#73a607 33%,#72a801 33%,#73aa00 34%,#7cb202 45%,#7eb200 45%,#7cb300 46%,#85b905 52%,#85ba03 53%,#8abc08 56%,#8abc06 57%,#8fc10b 61%,#94c311 63%,#97c410 65%,#9bc818 68%,#9bc816 68%,#9eca1b 69%,#9ecb19 70%,#a2cc1d 72%,#a2cf1f 74%,#a6d026 76%,#a7d125 78%,#aad329 79%,#aed42e 80%,#b1d735 85%,#b9db41 91%,#b8dd40 92%,#bbdd43 93%,#bcde46 98%,#bddf4a 100%,#c0d280 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1c13f', endColorstr='#c0d280',GradientType=0 ); /* IE6-9 */
border-radius: 15px;
        height: 192px;
       // padding: 15px 30px 40px;
      //  width: 326px;
        //padding: 15px 0px 30px 40px;


     padding: 15px 30px 30px;
    width: 306px;
    }

#login-form #header {
    padding-bottom: 5px;
}

    #login-form #header h1, #login-form #header h3 {
        margin: 0px;
    }

    #login-form #header h1 {
        font-size: 24px;
        font-weight: bold;
        color: #507500;
    }

    #login-form #header h3 {
        font-size: 18px;
        font-weight: bold;
    }

#login-form #form table {
    width: 100%;
}

#login-form #form .txt-input, #login-form #form .txt-empty {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: inset 1px 1px 2px 0px #666;
    -webkit-box-shadow: inset 1px 1px 2px 0px #666;
    box-shadow: inset 1px 1px 2px 0px #666;
    height: 28px;
    width: 286px;
    width: 100%!important;
    display: block;
}

#login-form #form .txt {
    margin: 5px 0;
    width: 286px !important;
    width: 100%!important;
}

#login-form #form .txt-empty {
    color: #909090;
}

#login-form #form td.right {
    text-align: right;
    padding-right: 38px;
}

#login-form #form .panel-buttons a:hover, #login-form #form .panel-links a:hover {
    color: #fdfff5;
}

/* REGISTER */
#registerForm {
    position: absolute;
    margin-top: -155px;
    margin-left: -220px;
    top: 50%;
    left: 50%;
}

#registerForm {
    -webkit-box-shadow: -1px -1px 10px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: -1px -1px 10px 0px rgba(50, 50, 50, 0.75);
    box-shadow: -1px -1px 10px 0px rgba(50, 50, 50, 0.75);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: white;
    width: 400px;
}

/*#register*/ #registerForm {
    height: 238px;
    padding: 20px;
}


    #registerForm #header {
        padding-bottom: 5px;
    }

        #registerForm #header h1, #registerForm #header h3 {
            margin: 0px !important;
        }

        #registerForm #header h1 {
            font-size: 24px;
            color: #507500;
        }

        #registerForm #header h3 {
            font-size: 18px;
        }

    #registerForm #form table {
        width: 100%;
    }

        #registerForm #form table td {
            padding: 4px;
        }

            #registerForm #form table td span {
                color: #df2327;
            }

    #registerForm #form .txt {
        width: 50% !important;
    }

/* HAVING TROUBLE */
#havingTroubleForm {
    position: absolute;
    margin-top: -155px;
    margin-left: -220px;
    top: 50%;
    left: 50%;
}

#havingTroubleForm {
    -webkit-box-shadow: -1px -1px 10px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: -1px -1px 10px 0px rgba(50, 50, 50, 0.75);
    box-shadow: -1px -1px 10px 0px rgba(50, 50, 50, 0.75);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: white;
    width: 400px;
}

/*#register*/
#havingTroubleForm {
    /*height: 238px;*/
    padding: 20px;
}


    #havingTroubleForm #header {
        padding-bottom: 5px;
    }

        #havingTroubleForm #header h1, #havingTroubleForm #header h3 {
            margin: 0px !important;
        }

        #havingTroubleForm #header h1 {
            font-size: 24px;
            color: #507500;
        }

        #havingTroubleForm #header h3 {
            font-size: 18px;
        }

    #havingTroubleForm #form table {
        width: 100%;
    }

        #havingTroubleForm #form table td {
            padding: 4px;
        }

            #havingTroubleForm #form table td span {
                color: #df2327;
            }

    #havingTroubleForm #form .txt {
        width: 50% !important;
    }

#complete-register {
    position: absolute;
    margin-top: -125px;
    margin-left: -220px;
    top: 50%;
    left: 50%;
}

#complete-register #registerForm {
    height: 250px;
    padding: 20px;
}

/* CLASSES */
.message {
    display: block;
    font-size: 15px;
    padding-top: 4px;
    line-height: 1;
}

.btn {
    //background-image: url("../images/login/button.png");
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9c667+0,f79621+100 */
background: rgb(249,198,103); /* Old browsers */
background: -moz-linear-gradient(top, rgba(249,198,103,1) 0%, rgba(247,150,33,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(249,198,103,1) 0%,rgba(247,150,33,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(249,198,103,1) 0%,rgba(247,150,33,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=0 ); /* IE6-9 */
    border-radius: 5px;

    background-repeat: no-repeat;
    border: medium none !important;
    color: #fff !important; /*color: #DE6700 !important;*/
    font-size: 16px;
    font-weight: bold;
    height: 35px;
   // padding: 7px 0 0;
    text-align: center;
    width: 117px;
    display: inline-block;
    text-decoration: none;

    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-hover {
    color: #fdfff5 !important;
    background-color: transparent;
}

.panel-buttons td {
    padding-top: 10px;
}

.panel-buttons a {
    background-color: transparent;
    color: #507500;
    font-weight: bold;
    text-decoration: none;
    outline: none;
    text-transform: uppercase;
}

.panel-buttons td.single-button {
    padding-left: 172px;
}

.panel-links a {
    background-color: transparent;
    color: #507500;
    font-weight: bold;
    text-decoration: none;
    outline: none;
}

.text-right {
    text-align: right;
}

/* CAPTCHA */
.RadCaptcha img {
    display: inline-block !important;
    vertical-align: middle;
}

.RadCaptcha a {
    display: inline-block !important;
    line-height: 50px;
    margin-left: 10px;
}

.RadCaptcha p {
    padding-top: 7px;
}

    .RadCaptcha p input {
        border-style: solid;
        border-width: 1px;
        border-color: #8e8e8e #b8b8b8 #b8b8b8 #8e8e8e;
        color: #333333;
        padding: 2px 5px 1px 5px;
        width: 168px;
    }

        .RadCaptcha p input:hover, .RadCaptcha p input:focus {
            border-color: #515151;
        }

    .RadCaptcha p label {
        margin-left: 10px;
    }



.form-body {
    display: flex;
    flex-direction: column;
}
.input-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
} 

.panel-link {
    
}

.panel-button {
   margin-top: 10px;
} 

#RadPasswordBox1_PasswordReal {
    width: 100%;
}

#RadPasswordBox1_PasswordMask {
    width: 100%;
}

.panel-link a {
    background-color: transparent;
    color: #507500;
    font-weight: bold;
    text-decoration: none;
    outline: none;
}

.panel-link a:hover {
    color: #fdfff5;
}

/*
#login-form.forgot-password {
    height: 150px;
}*/

.forgot-password .panel-link a {
    text-transform: uppercase;
}

#registerForm .input-row {
    margin-bottom: 10px;
}

#registerForm .input-row label {
    width: 50%;
}

#havingTroubleForm .input-row {
    margin-bottom: 10px;
}

#havingTroubleForm .input-row label {
    width: 50%;
}

#havingTroubleForm .input-row textarea {
    width: 50%;
    padding: 0;
}

@media only screen and (min-width : 150px) and (max-width : 1000px) {

    a.btn {
        font-size: 38px;
        height: 76px!important;
    }

    #logo img {
        width: 575px;
    }

    #login-form {
        color: #FDFFF5;
        position: absolute;
        //top: calc(50% - 115px);
        top: 175px;
        left: auto;
        text-align: center;
        height: auto;
        width: 90%;
        margin: 0 5%;
        box-sizing: border-box;
    }
        #registerForm #header h1,
        #havingTroubleForm #header h1,
        #login-form #header h1 {
            font-size: 58px;
            font-weight: bold;
            color: #507500;
            margin-bottom: 20px;
        }

        #registerForm #header h3,
        #havingTroubleForm #header h3,
        #login-form #header h3 {
            font-size: 42px;
            font-weight: bold;
            margin-bottom: 25px;
        }

    .input-row {
            flex-wrap: wrap;
    }

    .input-row:nth-child(1), .input-row:nth-child(2) {
         margin: 30px 0;
    }

    .panel-link {
        width: 100%;
        margin: 30px 0;
        font-size: 38px;
    }

    .panel-button {
         width: 100%;
         margin: 30px 0;
    }

    .form-body {
        position: relative;
    }
    .input-row:nth-child(2) {
        margin-bottom: 165px;
    }
    .input-row:nth-child(4) .panel-button:nth-child(2) {
        position: absolute;
        left: 0;
        top: 293px;
    }
    .panel-button .btn {
        width: 100%;
        font-size: 38px;
        height: 76px!important;
    }

    html body .RadInput_Default .riTextBox, html body .RadInputMgr_Default {
        font-size: 38px!important;
        height: 76px!important;
    }

    .message {
        font-size:30px;
    }



    #registerForm #form .txt {
        width: 100% !important;
    }

     #registerForm  {
        font-size: 30px;
        height: auto;
        position: absolute;
        //top: calc(50% - 115px);
        top: 175px;
        left: auto;
        text-align: center;
        height: auto;
        width: 90%;
        margin: 0 5%;
        box-sizing: border-box;
    }

     #registerForm .input-row label {
        width: 100%;
    }

    #havingTroubleForm #form .txt {
        width: 100% !important;
    }

    #havingTroubleForm {
        font-size: 30px;
        height: auto;
        position: absolute;
        //top: calc(50% - 115px);
        top: 175px;
        left: auto;
        text-align: center;
        height: auto;
        width: 90%;
        margin: 0 5%;
        box-sizing: border-box;
    }

    #havingTroubleForm .input-row label {
        width: 100%;
    }

    #havingTroubleForm .input-row textarea {
        width: 100%;
        font-size: 38px!important;
    }

    
}