/**
 * Voice Forms: Settings Css
 */

/* Common CSS */
#vfLanguage {
    cursor: pointer !important;
}

#vfavigationSettingsWrapper {
    background-color: #f1f1f1;
    padding: 5px;
}

#vfavigationSettingsWrapper table {
    border-collapse: collapse;
    width: 100%;
}

.vf-row {
    margin-bottom: 15px;
}

/* Clear floats after the columns */
.vf-row:after,
.vf-basic-config-sub-row:after {
    content: "";
    display: table;
    clear: both;
}

/* End of Common CSS */
/* Header */
#vfavigationSettingsWrapper #vfavigationSettingsPageHeading {
    font-size: 1.5em;
    color: #000000;
    cursor: default;
}

#vfavigationSettingsWrapper #vfavigationSettingsPageHeaderLogo {
    min-width: 200px;
    height: 66px;
    float: right;
}

#vfSubscribe {
    font-size: 0.9em !important;
    font-style: italic !important;
    text-align: right !important;
    padding: 3px 10px 3px 3px !important;
    margin-bottom: 3px !important;
    background-color: #29f48f !important;
}

.vf-setting-header-column-1,
.vf-setting-header-column-2 {
    float: left;
}

.vf-setting-header-column-1 {
    padding-top: 10px;
}

.vf-setting-header-column-1 {
    width: 50%;
}

.vf-setting-header-column-2 {
    width: 50%;
}

#vfavigationSettingsHeader.vf-row {
    margin-bottom: 5px;
}

/* End of Header */
/* Basic Configuration sections */
.vf-setting-basic-config-column-1,
.vf-setting-basic-config-column-2,
.vf-setting-basic-config-column-3 {
    float: left;
}

.vf-setting-basic-config-column-1 {
    width: 20%;
}

.vf-setting-basic-config-column-2 {
    width: 70%;
}

.vf-setting-basic-config-column-3 {
    width: 10%;
    text-align: center;
}

.vf-setting-basic-config-column-2 {
    padding-top: 5px;
    padding-bottom: 5px;
}

#vfavigationBasicConfigSection.vf-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.vf-basic-config-sub-row {
    padding: 5px;
}

.vf-basic-config-attached-label-column {
    margin-top: 1px;
    width: 14%;
    float: left;
    font-size: 0.9em !important;
}

.vf-basic-config-attached-input-column {
    width: 100%;
}

.vf-basic-config-attached-input-column input {
    width: 84%;
    margin-left: 0;
}

.vf-hide {
    display: none !important;
}

.vf-important {
    color: #FF0000 !important;
}

#vfKeyBoardSwitch {
    width: 7%;
}

#vfavigationBasicConfigSection .vf-row {
    margin-bottom: 0;
}

table#vfavigationBasicConfHeaderTable {
    height: 100%;
}

.vf-basic-config-attached-label-column {
    text-align: center;
    font-weight: bold;
    background-color: #eee;
    padding: 2px;
    border: 1px solid #ccc;
}

.vf-autotimeout-mic {
    margin-top: 5px;
}

.vf-autotimeout-label {
    font-weight: normal;
}

#vfavigationSettingsWrapper .vf-basic-config-section-title {
    background-color: #144659 !important;
    color: #ffffff;
    padding: 5px;
    text-align: center;
    cursor: default;
}

.vf-dotted-border {
    border: 1px dotted black !important;
    padding: 10px !important;
}

/* End of Basic Configuration sections */
/* Card Effect */
.vf-card {
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
}

/* End of Card effects */
/*----Media Queries ----*/
/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {

    /* For Full Width*/
    .vf-setting-basic-config-column-1,
    .vf-setting-basic-config-column-2,
    .vf-setting-basic-config-column-3,
    .vf-basic-config-attached-input-column,
    .vf-basic-config-attached-input-column input,
    .vf-setting-header-column-1,
    .vf-setting-header-column-2 {
        width: 100%;
    }

    /* For Settings page header */
    .vf-setting-header-column-1,
    .vf-setting-header-column-2 {
        text-align: center;
    }

    #vfavigationSettingsWrapper #vfavigationSettingsPageHeaderLogo {
        float: none;
    }

    /* For Basic Configuration */
    .vf-setting-basic-config-column-1,
    .vf-setting-basic-config-column-2,
    .vf-setting-basic-config-column-3,
    .vf-basic-config-sub-row {
        margin-top: 10px;
    }

    #vfBasicConfHeaderSection.vf-setting-basic-config-column-1 {
        margin-top: 0;
    }

    #vfavigationBasicConfigSection.vf-row {
        display: block !important;
    }

    #vfBasicConfHeaderSection {
        padding: 0 !important;
    }

    .vf-basic-config-attached-label-column {
        width: 99%;
    }

    #vfKeyBoardSwitch {
        width: 12.2%;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    /* For Full Width*/
    .vf-setting-basic-config-column-1,
    .vf-setting-basic-config-column-2,
    .vf-setting-basic-config-column-3,
    .vf-basic-config-attached-input-column,
    .vf-basic-config-attached-input-column input,
    .vf-setting-header-column-1,
    .vf-setting-header-column-2 {
        width: 100%;
    }

    /* For Settings page header */
    .vf-setting-header-column-1,
    .vf-setting-header-column-2 {
        text-align: center;
    }

    #vfavigationSettingsWrapper #vfavigationSettingsPageHeaderLogo {
        float: none;
    }

    /* For Basic Configuration */
    .vf-setting-basic-config-column-1,
    .vf-setting-basic-config-column-2,
    .vf-setting-basic-config-column-3,
    .vf-basic-config-sub-row {
        margin-top: 10px;
    }

    #vfBasicConfHeaderSection.vf-setting-basic-config-column-1 {
        margin-top: 0;
    }

    #vfavigationBasicConfigSection.vf-row {
        display: block !important;
    }

    #vfBasicConfHeaderSection {
        padding: 0 !important;
    }

    .vf-basic-config-attached-label-column {
        width: 98%;
    }

    #vfKeyBoardSwitch {
        width: 13.2%;
    }
}