/*
* main.css
*
* Copyright (c) 2014, NETGEAR, Inc.
* 350 East Plumeria, San Jose California, 95134, U.S.A.
* All rights reserved.
*
*
* This software is the confidential and proprietary information of
* NETGEAR, Inc. ("Confidential Information"). You shall not
* disclose such Confidential Information and shall use it only in
* accordance with the terms of the license agreement you entered into
* with NETGEAR.
*
* sergey.yakubovsky@netgear.com
*
*/

*, *:before, *:after
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*[draggable="true"]
{
    cursor: move;
}

.vuezone-fs17
{
    font-size: 17px;
}

.vuezone-cp
{
    cursor: pointer;
}

.vuezone-red
{
    color: #DC0451;
}

html, body, ui-view
{
    display: block;
    background-color: #f1f0ed;
    margin: 0;
    padding: 0;
    border: 0 none;
    height: 100%;
    font-family: Arial;
    font-size: 14px;
    line-height: normal;
}

ui-view
{
    overflow: auto;
}

body
{
    overflow: auto;
}

p
{
    margin: 0;
    padding: 0;
}

.button-new
{
    background-color: #7d4297;
    font-size:24px;
    width:400px;
    height:60px;
    margin-left:5%;
    margin-top:25%;
}
@media screen and (max-width: 480px){
.button-new{
    background-color: #7d4297;
    font-size:16px;
    width:260px;
    margin-top:10%;

}
}
.button-new:focus, .button-new:hover
{
    background-color: #8c4fa7;
}

.button-new:active
{
    background-color: #733a8c;
}

.button-delete
{
    background-color: #E98300;
}

.button-delete:focus, .button-delete:hover
{
    background-color: #fa920d;
}

.button-delete:active
{
    background-color: #dd7d01;
}

label
{
    font-weight: normal;
}

.wrapper
{
    position: absolute;
    top: 60px;
    bottom: 60px;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: #ffffff;
    margin: 0 auto;
    overflow: auto;
}

#cameraViews
{
    padding: 8px;
    text-align: center;
}

.required-tip
{
    padding-top: 10px;
    color: #808080;
}

.setup-body
{
    background: linear-gradient(135deg, #eae9e5 35%, #e5e2dd 35%, #e5e2dd);
    padding-top: 70px;
    text-align: center;
    min-height: 100%;
}

.setup-steps
{
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    background-color: #fff;
}

.login-body
{
    background: url(../../img/login/login_picture.png) no-repeat right bottom;
    background-color: #e7e5e2;
    background-size: contain;
    min-height: 100%;
    position: relative;
}

.login-body-inner
{
    background: url(../../img/login/login_facet.png) no-repeat 0 bottom;
    background-size:100% 20%;
    height: 100%;
    position: absolute;
    width: 100%;
}
@media screen and (max-width: 768px) 
{
    .login-body-inner
    {
       background-size:100% 13%;
    }
}
@media screen and (max-width: 480px)
{
    .login-body-inner
    {
       background-size:100% 10%;
    }
}
.login-form
{
    margin: 5% 10%;
    display: inline-block;
    text-align: left;
    width: 260px;
}

.ie8 .login-form
{
    position:absolute;
    z-index:3;
}
.regester-form
{
    margin: 10% auto;
    text-align: center;
    width: 260px;
}
.regester-form button
{
    width: 100%;
    margin-top: 10px;
}
.claim-form,
.billing-form
{
    width: 40%;
    text-align: left;
    min-width: 300px;
    margin: 0 auto;
    padding-top: 10px;
}

.register-form
{
    display: inline-block;
    min-width: 300px;
    text-align: left;
}

.register-form .error
{
    float: right;
    width: 300px;
}

.register-form .required-tip
{
    padding-top: 0;
    float: right;
    width: 300px;
}

.password-form
{
    display: inline-block;
    width: 300px;
    margin: 0 auto;
    text-align: left;
}

.password-form input
{
    margin-top: 10px;
    width: 300px;
}

.login-form .loginInfo input[type="button"],
.login-form input[type="email"],
.login-form input[type="text"],
.login-form input[type="password"],
.claim-form select,
.claim-form input[type="text"],
.claim-form input[type="password"],
.billing-form input[type="text"],
.billing-form select
{
    width: 100%;
    margin-top: 10px;
}

.billing-form .billing-date,
.billing-form .billing-date[type="text"]
{
    width: auto;
    vertical-align: top;
}

#cardInformationForm:not(.ng-pristine) input[type="text"].ng-invalid,
#cardInformationForm:not(.ng-pristine) select.ng-invalid
{
    border-color: #DC0451;
}

.billing-check
{
    margin-top: 10px;
}

.login-remember
{
    line-height: 2.3em;
    font-weight: normal;
}

.password-help
{
    display: block;
    margin-top: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    color: #00a1de;
}

.password-help:hover
{
    color: #20b9f0;
}

.login-version
{
    margin: 10px 0;
}

.register-line
{
    float: right;
    margin-bottom: 10px;
    text-align: left;
}

.register-form input,
.register-form select
{
    width: 300px;
}

.register-terms
{
    margin-top: 10px;
    float: right;
    width: 300px;
}

.register-link
{
    color: #00a1de;
    cursor: pointer;
}

.register-link:hover
{
    color: #20b9f0;
}

.register-have-account
{
    color: #00a1de;
    width: 300px;
}

.cameras-shadow
{
    box-shadow: 0px 0px 4px #888;
    position: relative;
    height: 100%;
    font-size: 0;
}

.cameras-header
{
    font-size: 14px;
    background-color: #ffffff;
    height: 44px;
    padding: 0 15px;
    box-shadow: 0px 4px 4px -4px #888;
}

.cameras-info
{
    float: left;
    height: 100%;
}

.cameras-name
{
    padding-top: 5px;
    font-weight: bold;
}

.cameras-time
{
    color: #666;
}

.cameras-player
{
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /*display: block;*/
    overflow: hidden;
    position: relative;
    font-size: 14px;
}
.cameras-player object,
.cameras-player camera
{
    position: absolute;
}
.cameras-player-played object,
.cameras-player-played camera
{
    z-index: 4;
    height: 100%;
    width: 100%;
}

.cameras-player img
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.cameras-p-synced
{
    font-size: 24px;
    color: #333;
    word-spacing: -3px;
    padding-bottom: 18px;
}

.cameras-p-plan
{
    font-size: 17px;
    color: #333;
}

.cameras-upgrade-plan
{
    font-size: 24px;
    color: #e98300;
    padding-top: 19px;
    cursor: pointer;
}

.cameras-upgrade-plan:hover
{
    color: #e98300;
}

.cameras-battery,
.cameras-signal,
.cameras-motion,
.cameras-expand
{
    float: right;
    width: 40px;
    height: 100%;
}

.cameras-states
{
    float: right;
    width: 132px;
    height: 100%;
}

.camera-offline
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.8;
    background-color: #fff;
    font-size: 17px;
    text-align: center;
    padding-top: 23%;
    z-index: 2;
}

.camera-stop
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 4;
}

.camera-loading,
.camera-loading-pad
{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}
.camera-loading-pad
{
    background-color: #000;
    opacity: 0.3;
}
.camera-loading-text
{
    font-size: 17px;
    color: #fff;
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 5;
}

.cameras-pause,
.cameras-record,
.cameras-record-stop,
.cameras-volume,
.cameras-snapshot,
.cameras-bright
{
    display: table-cell;
    cursor: pointer;
    width: 44px;
    height: 44px;
    vertical-align: middle;
}

.cameras-bright-menu
{
    position: absolute;
    top:40px; right: 0;z-index: 100; border: solid 1px #808080;
}

.cameras-bright-menu-item
{
    cursor: pointer;
    width: 44px;
    height: 44px;
}

.cameras-record-time
{
    position: absolute;
    right: 5px;
    z-index: 5;
    color: #fff;
}

.camera-files
{
    height: 32px;
    min-width: 32px;
    border-radius: 4px;
    background-color: #00a1de;
    color: #fff;
    font-size: 14px;
    position: absolute;
    top: 14px;
    left: 12px;
    box-shadow: 1px 1px 3px #888;
    padding: 8px 6px;
    text-align: center;
    cursor: pointer;
    z-index: 3;
}

.buttons-bottom
{
    margin-top: 20px;
    float: right;
}

.button-fixed
{
    min-width: 100px;
    white-space: nowrap;
}

.button-100
{
    width: 100%;
}

.button-cancel
{
    background: #ffffff;
    color: #000000;
}

.footer
{
    z-index: 1000;
    position: absolute;
    bottom: 0;
    height: 60px;
    background-color: white;
    width: 100%;
    box-shadow: 0px 0px 6px #333;
}

.footer-button,
.footer-button-active,
.footer-button-disable
{
    display: table-cell;
    padding-left: 15px;
    min-width: 60px;
}

.footer-button
{
    cursor: pointer;
}

.footer-button-active
{
    background: radial-gradient(circle at -71px center, #000, transparent 80px);
}

.footer-button-c
{
    display: table-cell;
    vertical-align: bottom;
    font-size: 12px;
    font-weight: bold;
    height: 60px;
    padding-bottom: 3px;
    color: #5e514f;
}

.footer-button-r
{
    width: 15px;
    height: 100%;
    display: table-cell;
}

.footer-button-active .footer-button-r
{
    background: radial-gradient(circle at 85px center, #000, transparent 80px);
}

.footer-button-active .footer-button-c
{
    color: #6e2585;
}

.clear
{
    clear: both;
}

small
{
    font-size: 14px;
}

.error
{
    color: #DC0451;
    line-height: normal;
}
.webloginSetup .error {
    color: #DC0451;
    line-height: normal;
    display:inline-block;
}

.plan-body
{
    padding-top: 10%;
    height: 100%;
    background-color: #fff;
    color: #fff;
    text-align: center;
}

.plan-body-settings
{
    padding-top: 0;
    background-color: #f1f0ed;
}

.plan-body-settings .settings-header
{
    margin-bottom: 20px;
}

.plan-loading
{
    font-size: 17px;
    color: #000;
}

.plan-block,
.plan-block-basic
{
    display: inline-block;
    padding: 10px;
    overflow: hidden;
    font-size: 17px;
    margin-right: 10px;
    text-align: left;
    background-color: #c0c0c0;
    min-height: 192px;
    min-width: 318px;
    vertical-align: top;
}

.plan-block-basic
{
    background-color: #c0c0c0;
}

.plan-block-premier
{
    background: -webkit-linear-gradient(90deg, #0080ff, #80ffff);
    background: linear-gradient(90deg, #0080ff, #80ffff);
}

.plan-block-elite
{
    background: -webkit-linear-gradient(90deg, #0100a0, #8000ff);
    background: linear-gradient(90deg, #0100a0, #8000ff);
}

.plan-title
{
    font-size: 24px;
    padding-bottom: 10px;
}

.plan-label
{
    padding-bottom: 10px;
    white-space: nowrap;
}

.plan-block button,
.plan-block-basic button
{
    color: #000;
    background-color: #fff;
    text-transform: none;
    white-space: nowrap;
    padding: 0 20px;
    width: 48%;
}

.plan-block-basic button
{
    width: 100%;
}

.plan-block button + button
{
    margin-left: 4%;
}

.settings-padding-left
{
    padding-left: 16px;
}

.settings-container
{
    width: 40%;
    float: left;
    /*border-top: solid 1px #b2b2b2;*/
    border-right: solid 1px #8e8e93;
    background-color: #f1f0ed;
    height: 100%;
    overflow-y: auto;
}

.settings-panel-right
{
    float: right;
    width: 60%;
    height: 100%;
    overflow: auto;
    position: relative;
}
.settings-panel-right .setup-body
{
    padding-top: 70px;
}
.settings-panel
{
    padding: 20px;
}

.settings-header
{
    background-color: #fff;
    color: #000;
    font-weight: bold;
    text-align: center;
    font-size: 17px;
    height: 44px;
    line-height: 44px;
    white-space: nowrap;
    overflow: hidden;
}

.settings-group,
.settings-list-title
{
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 17px;
    font-weight: bold;
    margin: 0;
}

.settings-group
{
    border-bottom: solid 1px #c8c7cc;
    overflow: hidden;
}

.settings-item
{
    border-bottom: solid 1px #c8c7cc;
    width: 100%;
    text-align: left;
    padding-left: 16px;
    text-transform: none;
    color: #000;
    background-color: #fff;
    height: 42px;
    line-height: 42px;
}

.settings-back
{
    float: left;
    color: #00a1de;
    padding-left: 12px;
    cursor: pointer;
    font-weight: normal;
}

.settings-mode
{
    float: right;
    color: #00a1de;
    padding-right: 12px;
    cursor: pointer;
    font-weight: normal;
}

.settings-mode[disabled=disabled]
{
    color: #888;
    cursor: default;
}

.settings-addmode
{
    color: #00a1de;
    cursor: pointer;
    font-weight: normal;
    height: 44px;
    line-height: 44px;
}

.settings-delete
{
    min-width: 160px;
    margin: 20px auto;
    display: block;
}

.settings-schedule-on,
.settings-schedule-off
{
    float: right;
    margin-top: 4px;
    margin-right: 12px;
    width: 50px;
    height: 30px;
    border-radius: 15px;
    background-color: #2FB26A;
}

.settings-schedule-off
{
    background-color: #aaa;
}

.settings-schedule-on > div
{
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background-color: #fff;
    margin-top: 2px;
    margin-left: 22px;
}

.settings-schedule-off > div
{
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background-color: #fff;
    margin-top: 2px;
    margin-left: 2px;
}

.settings-list
{
    background-color: #fff;
    border-radius: 4px;
    padding: 4px 16px;
    overflow: hidden;
}

.settings-list-item-p
{
    padding-left: 30px;
}

.settings-list-item,
.settings-list-item-edit
{
    position: relative;
    border-bottom: solid 1px #c8c7cc;
    height: 44px;
    line-height: 44px;
    overflow: hidden;
}

.settings-list-item-2l
{
    border-bottom: solid 1px #c8c7cc;
    height: 56px;
    padding-top: 7px;
    overflow: hidden;
}

.settings-list-item-edit
{
    display: table-row;
    width: 100%;
}

.settings-list-item-label
{
    display: table-cell;
    white-space: nowrap;
    padding-right: 5px;
    text-align: right;
}

.settings-list-item-value
{
    display: table-cell;
    width: 100%;
    padding: 5px 0;
}

.settings-list-item-value input
{
    width: 100%;
}

.settings-list-item-edit > label
{
    text-align: right;
    padding-right: 5px;
    display: table-cell;
}

.settings-list-item2 > *
{
    display: table-cell;
}

.settings-list > .settings-list-item:last-child,
.settings-list > .settings-list-item-2l:last-child
{
    border-bottom: 0;
}

.settings-list-item-tip
{
    color: #6d6d72;
}

.settings-list-item-active
{
    background: url(../img2/checkbox-1.png) no-repeat 0 center;
}

.settings-list-item-wrap
{
    display: table-cell;
    width: 100%;
}

.settings-list-item-wrap input
{
    width: 100%;
}

.alert-body
{
    position: fixed;
    top: 0;
    right: 0;
    max-width: 400px;
    border: solid 1px #888;
    color: #f00;
    padding: 15px 30px 15px 15px;
    z-index: 10001;
    background-color: #fff;
}

.settings-add,
.settings-remove
{
    padding: 0px 6px;
    border-radius: 15px;
    border: solid 1px #00a1de;
    color: #00a1de;
    font-size: 25px;
    line-height: 0px;
    top: 3px;
    position: relative;
    cursor: pointer;
}

.alert-close
{
    font-size: 25px;
    position: absolute;
    top: 0;
    right: 8px;
    color: #888;
}

.settings-remove:after,
.alert-close:after
{
    content: '×';
}

.settings-info
{
    padding: 1px 9px;
    border-radius: 12px;
    background-color: #00a1de;
    color: #fff;
    font-size: 17px;
    line-height: 0px;
    margin-left: 5px;
    cursor: pointer;
}

.settings-info:after
{
    content: 'i';
}

.settings-padding-top
{
    padding-top: 10px;
}

.settings-rule-select
{
    margin-left: 35px;
}

.settings-name
{
    color: #fff;
    background-color: #00a1de;
    height: 44px;
    line-height: 44px;
    font-size: 17px;
    font-weight: bold;
    padding-left: 20px;
}

.settings-power-selected
{
    color: #00a1de;
    background: url(../img2/checkbox-2.png) no-repeat right center;
}

.settings-power-selected .settings-list-item-tip
{
    color: #00a1de;
}

.settings-personal-label
{
    text-align: right;
    display: table-cell;
    padding-right: 5px;
}

.settings-personal-value
{
    display: table-cell;
    padding-bottom: 10px;
}

.settings-personal-value input,
.settings-personal-value .error
{
    width: 300px;
}

.settings-personal-list
{
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
}

.settings-personal-block
{
    display: table;
    margin-left: auto;
    margin-right: 30%;
}

@media only screen and (max-width: 1600px)
{
    .settings-personal-block
    {
        margin-right: 20%;
    }
}

@media only screen and (max-width: 1023px)
{
    .settings-personal-block
    {
        margin-right: 0%;
    }
}

.settings-rule-list
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.settings-alerts-selected
{
    color: #00a1de;
    background: url(../img2/checkbox-2.png) no-repeat right center;
}

.settings-list-loading
{
    padding: 10px 0;
    text-align: center;
}

.settings-friends-cameras
{
    padding-left: 30px;
    cursor: pointer;
}

.settings-friends-selected
{
    color: #00a1de;
    background: url(../img2/checkbox-2.png) no-repeat left center;
}

.sync-wrap
{
    display: table;
    margin: 0 auto;
    text-align: center;
    margin-top: 70px;
}

.sync-image
{
    max-width: 100%;
    height: auto;
    margin: 20px 0;
}

.settings-about-text
{
    display: inline-block;
    width: 30%;
}

.settings-about-value
{
    display: inline-block;
    width: 68%;
    color: #00a1de;
}

.settings-about-terms
{
    display: table;
    margin: 0 auto;
    color: #00a1de;
    cursor: pointer;
    text-decoration: underline;
}

.settings-bs .settings-list
{
    margin-bottom: 20px;
}

.settings-bs-label
{
    display: inline-block;
    width: 30%;
}

.settings-bs-value
{
    color: #00a1de;
    display: inline-block;
    width: 69%;
}

.settings-bs-value input,
.settings-bs-value select
{
    width: 100%;
    margin: 5px 0;
}

.settings-bs-buttons
{
    text-align: center;
}

.settings-bs-buttons button
{
    padding: 0 20px;
    margin: 0 10px;
    min-width: 125px;
}

.status-box
{
    position: fixed;
    right: 20px;
    bottom: 20px;
    overflow: hidden;
    width: 200px;
}

.billing-loading
{
    font-size: 17px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.billing-box
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.3;
}

.billing-board
{
    display: table;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border: solid 2px #00a1de;
}

.wrapper-fullscreen .camera-hidden
{
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 0;
}

.wrapper-fullscreen
{
    overflow: hidden;
}

.cameras-expand
{
    position: absolute;
    right: 10px;
    width: 20px;
    height: 44px;
    top: 0;
}

.cameras-expand>div
{
    border: solid 3px #555;
    width: 20px;
    height: 16px;
    margin-top: 14px;
}

.settings-camera-label
{
    padding: 10px 0;
}

.settings-camera-light,
.settings-camera-dark
{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    background-color: #fff;
}

.settings-camera-dark
{
    background-color: #000;
}

.footer-modes
{
    position: absolute;
    bottom: 0px;
    width: 100%;
    z-index: 1001;
    text-align: center;
    color: #5E514F;
    background-color: #fff;
    font-weight: bold;
}

.subscribe-listitem-device
{
    height: auto;
}

.subscribe-menu
{
    position: fixed;
    bottom: 0px;
    width: 60%;
    z-index: 1001;
    text-align: center;
    color: #5E514F;
    background-color: #fff;
}

.footer-mode
{
    height: 44px;
    line-height: 44px;
    white-space: nowrap;
    cursor: pointer;
    border-top: solid 1px #aaa;
}

.footer-mode-active
{
    color: #00a1de;
}

.settings-subscription-value
{
    position: absolute;
    right: 0;
    top:0;
    height: 44px;
}

.settings-preferences-row
{
    padding: 14px 0;
}

.settings-preferences-border
{
    border-bottom: solid 1px #c8c7cc;
}

.settings-preferences-option
{
    padding: 14px 0 14px 5%;
    position: relative;
}

.settings-preferences-option input
{
    position: absolute;
    right: 0;
    top: 14px;
}

.settings-preferences-disabled
{
    color: #aaa;
}

.sortable-dragging
{
    border: solid 1px #000;
}
.sortable-placeholder
{
    height: 44px;
    border: dashed 1px #00a1de;
}

.schedule-info
{
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    font-weight: bold;
}

.progress
{
    margin-bottom: 0;
}

.storage-plan-loading,
.plan-body-settings .plan-loading
{
    font-size: 17px;
    color: #000;
    display: table;
    margin: 10% auto;
    padding: 20px;
    background-color: #fff;
    border: solid 1px #808080;
    text-align: center;
}

.settings-storage-selected
{
    background: url(../img2/checkbox-2.png) no-repeat right center;
}

.subscription-loading
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.subscription-loading-pad
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #000;
    opacity: 0.3;
}

.subscription-loading-top
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.setup-sign-in
{
    width: 40%;
    min-width: 300px;
    margin: 0 auto;
}

.setup-sign-in input
{
    width: 100%;
    margin-bottom: 15px;
}

.regformButtons {
  text-align: center;
  width: 100%;
  font-size: 13px;
}
.regformButtons.regbottom {
  clear:  both;
  margin-bottom: 50px;
}

#byheadline {
  line-height: 1.4;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.webloginSetup #byheadline {
  text-align: left;
}
@media screen and (max-width: 540px) {
  #byheadline {
    text-align: center;
    line-height: 1.4;
    font-size: 18px;
    font-weight: bold;
  }

  .webloginSetup #byheadline {
    text-align: left;
  }
}

.regcontainer {
  max-width: 360px;
  min-width: 160;
  margin: 0 auto;
  text-align: auto;
}

.webloginSetup 
input[type="text"],
input[type="email"],
input[type="password"],
select {
  width: 88%;
  display:inline-block;
}
@media screen and (max-width: 768px) {
    .regcontainer {
      max-width: 384px;
      margin: 0 auto;
      text-align: auto;
    }
}

.accept
{
    float: left;
    line-height: 2.3em;
    font-weight: normal;
}

#cardInformationForm:not(.ng-pristine) input[type="text"].ng-invalid,
#cardInformationForm:not(.ng-pristine) select.ng-invalid
{
    border-color: #DC0451;
}

.regsimpleChoiceWrapper {
  width: 100%;
  padding: 100px 10%;
}