/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 25, 2019, 3:42:22 PM
    Author     : phlan
*/

/*------------------------------------------------------------------------------
    placeholders
------------------------------------------------------------------------------*/
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 1; /* Firefox */
  color: hsla(42, 12%, 62%, .92);
  color: hsl(0, 0%, 64%);
}
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: hsla(42, 12%, 62%, .92);
    color: hsl(0, 0%, 64%);
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   opacity:  1;
   color: hsla(42, 12%, 62%, .92);
   color: hsl(0, 0%, 64%); 
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   opacity:  1;
   color: hsla(42, 12%, 62%, .92);
   color: hsl(0, 0%, 64%);
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: hsla(42, 12%, 62%, .92); 
   color: hsl(0, 0%, 64%);
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: hsla(42, 12%, 62%, .92);
  color: hsl(0, 0%, 64%);
}


/*------------------------------------------------------------------------------
   header and footer letter spacing
------------------------------------------------------------------------------*/
.navbar-item a,
.page-footer a{
       letter-spacing: .03em;
} 

/*------------------------------------------------------------------------------
   h1 - h6
------------------------------------------------------------------------------*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
    
    color: rgba(0, 0, 0, .67);
    color: #c4c2ae;
    opacity: .9;
    
    margin-bottom: 3px;
    font-family: 'MedievalSharp', cursive;
    margin-top: 0px;
    
    letter-spacing: .02em;
}
h1, .h1{
   font-size: 24px;
   line-height: 24px;
}
h2, .h2{
   font-size: 20px;
   line-height: 21px;
}
/* Note: default style h3
h3, .h3{
   font-size: 15px;
   line-height: 16px;
   font-family: 'Open Sans', sans-serif;
   letter-spacing: .06em;
   font-weight: 400;
   margin-top: 1em;
   font-style: italic;
}
*/
h3, .h3{
   /* Note: special, looks large and  faded */
    font-size: 32px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: .05em;
    font-weight: 400;
    margin-top: .8em;
    margin-bottom: .5em;
    opacity: .4;
    margin-left: -0px;
}

h4, .h4{
   font-size: 14px;
   line-height: 14px;
}

/* subtitle */
h5, .h5, h6, .h6{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, .38);
    margin-top: -3px;
    margin-bottom: 8px;
    
    color: rgba(126, 122, 109, .66);
    line-height: 1.42857143;
    opacity: 1;
}
h5, .h5{
    font-size: 13px;
}
h6, .h6{
    font-size: 10px;
}


/*------------------------------------------------------------------------------
    mobileForm, menu
------------------------------------------------------------------------------*/
.mobileForm {
    background-color: #FFFFFF;
    border-top: 0.5px solid #C9CCCC;
    border-bottom: 0.5px solid #C9CCCC;
}

/* for text area */
.mobileForm-item-area{
    height: auto;
    width: 100%;
}
.mobileForm-item-area > .textarea-simple{
    resize: none;
    width: 100%;
    padding: 7px 8px 5px 11px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


/* form */
.mobileForm {
    background-color: transparent;
    border-top: 1px solid rgba(0, 0, 0, .21);
    border-bottom: 1px solid rgba(0, 0, 0, .21);
    border-width: 1px; /* + retina */
    
   /* border-color: rgba(201, 201, 196, 1); /*eggshell*/
}

/* mobileForm submit btn below */
.mobileForm-submit{
    margin-top: 21px;
    margin-left: 8px;
}

/*****/

/*______________________________________________________________________________
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
 from deprecated General
////////////////////////////////////////////////////////////////////////////////
*/
/*------------------------------------------------------------------------------
    mobileForm, menu
------------------------------------------------------------------------------*/
.mobileForm {
    background-color: #FFFFFF;
    border-top: 0.5px solid #C9CCCC;
    border-bottom: 0.5px solid #C9CCCC;
}

/* for text area */
.mobileForm-item-area{
    height: auto;
    width: 100%;
}
.mobileForm-item-area > .textarea-simple{
    resize: none;
    width: 100%;
    padding: 7px 8px 5px 11px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
/*______________________________________________________________________________
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
 Overrite General
////////////////////////////////////////////////////////////////////////////////
*/

/* form */
.mobileForm {
    background-color: transparent;
    border-top: 1px solid rgba(0, 0, 0, .21);
    border-bottom: 1px solid rgba(0, 0, 0, .21);
    border-width: 1px; /* + retina */
    
   /* border-color: rgba(201, 201, 196, 1); /*eggshell*/
}

/* mobileForm submit btn below */
.mobileForm-submit{
    margin-top: 21px;
    margin-left: 8px;
}


/*------------------------------------------------------------------------------
    mobileForm title and subtitle
------------------------------------------------------------------------------*/
/* dark normal (title)*/
.title{
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 17px;
    color: rgba(255, 255, 255, .67);
    color: #c4c2ae;
    opacity: .9;
  
    line-height: 21px;
    margin-bottom: 3px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: .04em;
}
/* gray bold (subtitle)*/
.subtitle{
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color: rgba(0, 0, 0, .38);
    font-size: 13px;
    margin-top: -3px;
    margin-bottom: 8px;
    
    font-family: 'Open Sans', sans-serif;
    letter-spacing: .01em;
    color: rgb(126 122 109);
    opacity: .83;
    font-style: italic;
}


/*******/
/*------------------------------------------------------------------------------
    mobileForm (removed title class, is now h2)
------------------------------------------------------------------------------*/
.mobileForm-text{
    margin: 0px 15px;
    margin-left: 17px;
    margin-bottom: 6px;
}
.mobileForm-text-bottom{
    margin: 5px 15px 0px 17px;
}

/* dark normal (content)*/
.mobileForm-desc{
    font-family: "Montserrat", sans-serif;
    color: rgba(0, 0, 0, .85);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 7px;
}

/* for titleless menu or form */
.mobileForm-buffer-top{
    margin-top: 40px; /*25*/
}
.mobileForm-buffer-bottom{
    margin-bottom: 35px;
}
/* small buffer for bottom of title when alone */
.title-standalone{
    margin-bottom: 10px;
}

.mobileForm{
    margin: 0px;
    padding: 0px;
    background-color: transparent;
    border-top: 1px solid rgba(0, 0, 0, .21);
    border-bottom: 1px solid rgba(0, 0, 0, .21);
    border-width: 1px; /* + retina */
}
.retina .mobileForm{
    border-width: 0.5px;
}

/* form-min
============================*/
.mobileForm-min{
    border: none;
}
.mobileForm-min,
.mobileForm-min .mobileForm-item{
    background-color: transparent;
}
.mobileForm-min .mobileForm-input{
    width: -moz-calc(100% - 40px);
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    padding-left: 2px; 
}
.mobileForm-min hr{
    margin-left: 0px;
}
.mobileForm-min .mobileForm-item:last-child hr{
    display: block;
}
/* centered options */
.mobileForm-min .mobileForm-item.center .mobileForm-input{ /* centered input no glyph */
    width: -moz-calc(100% - 60px);
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    text-align: center;
    padding-left: 30px;
}


/* general NEW
============================*/

.mobileform-title.margin-bottom{
   margin-bottom: 5px;
}

/* p NEW
 * Edit: changed from class .p to just override p in general
============================*/
p{
  /* margin-top: 13px; */
  color: hsl(46deg 7% 60%);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.65;
}
p.light{
   color: rgb(126 122 109);
}
/* bootstrap */
p.has-error,
p.has-warning,
p.has-success{
   font-size: 14px;
   font-weight: 600;
}
p.has-error{
   color: #a94442;
   color: hsl(3 42% 51% / 1);
}
p.has-success{
   color: #3c763d;
   color: hsl(120.81deg 33.04% 43.92%)
}
p.has-warning{
   color: #8a6d3b;
   color: hsl(38 40% 47% / 1);
}


/* label
============================*/
.form-label {
    font-weight: 600;
    font-size: 13px;
    color: #444;
    margin-bottom: 3px;
}


/* -------------------------------------------------------------------------- */
/* mon btn */
/* -------------------------------------------------------------------------- */

.mon-btn:focus,
.mon-btn:active{
    border-color: rgba(0, 175, 234, 1);
    border-color: hsla(203, 99%, 58%, 1);
    /* added for avidsphere style (must be in this position) */
    border-color: hsla(185, 65%, 43%, 1);
}

.mon-btn,
.mon-btn-text{
    color: #444;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    font-family: "Arial", sans-serif;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
}
.mon-btn{
    position: relative;
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(center top , #f5f5f5, #f1f1f1);
    background-image: -o-linear-gradient(center top , #f5f5f5, #f1f1f1);
    background-image: -moz-linear-gradient(center top , #f5f5f5, #f1f1f1);
    background-image: linear-gradient(center top , #f5f5f5, #f1f1f1);
    border: 1px solid rgba(0, 0, 0, 0.21);
    border-radius: 2px;
    cursor: pointer;
    height: 29px;
    line-height: 27px;
    min-width: 72px;
    outline: 0 none;
    padding: 0 8px;
}
.mon-btn:hover{
    background-color: #f7f8f8;
    background-image: -webkit-linear-gradient(center top, #f7f8f8, #f0f1f1);
    background-image: -o-linear-gradient(center top, #f7f8f8, #f0f1f1);
    background-image: -moz-linear-gradient(center top, #f7f8f8, #f0f1f1);
    background-image: linear-gradient(center top, #f7f8f8, #f0f1f1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11);
    color: #333;
    border-color: rgba(0, 0, 0, 0.3);
}
.mon-btn:focus::before {
    border: 1px solid transparent;
    bottom: 0;
    content: "";
    left: 0;
    margin: 1px;
    position: absolute;
    right: 0;
    top: 0;
}
.mon-btn:focus,
.mon-btn:active{
    /* border color located with form-item classes now
    border-color: rgba(0, 175, 234, 1);
    border-color: hsla(203, 99%, 58%, 1);
    */
}
.retina .mon-btn{
    border-width: 0.5px;
}
/* large */
.mon-btn-wide{
    padding: 0 21px;
}
.mon-btn-large{
    font-size: 12px;
    font-weight: 500;
    height: 40px;
    line-height: 39px;
    padding: 0 13px;
}
/* icon */
.mon-btn-icon.mon-btn-large,
.mon-btn-icon{
    margin-left: 0px;
    min-width: 30px;
    font-size: 14px
}

/* active */
.mon-btn:active{
    background-color: #F2F3F3;
    /* border-color: #B8BBBC;
    color: #444; */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15) inset;
    background-image: -webkit-linear-gradient(center top , #F2F3F3, #EAEBEB);
    background-image: -o-linear-gradient(center top , #F2F3F3, #EAEBEB);
    background-image: -moz-linear-gradient(center top , #F2F3F3, #EAEBEB);
    background-image: linear-gradient(center top , #F2F3F3, #EAEBEB);
}
/* color (added avidsphere colors)*/
.mon-btn-aviddarkblue:focus,
.mon-btn-aviddarkblue:active,
.mon-btn-avidblue:focus,
.mon-btn-avidblue:active,
.mon-btn-avidpink:focus,
.mon-btn-avidpink:active,
.mon-btn-blue:focus,
.mon-btn-blue:active,
.mon-btn-green:focus,
.mon-btn-green:active,
.mon-btn-red:focus,
.mon-btn-red:active {
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 1px #fff inset;
    outline: 0 none rgba(0, 0, 0, 0);
}
/* blue (deprecated, more blue) */
.mon-btn-blue-deprecated{
    background-color: hsl(217, 99%, 65%);
    background-image: -webkit-linear-gradient(center top , #4B95FC, #448CEA);
    background-image: -o-linear-gradient(center top , #4B95FC, #448CEA);
    background-image: -moz-linear-gradient(center top , #4B95FC, #448CEA);
    background-image: linear-gradient(center top , #4B95FC, #448CEA);
    border-color: hsl(214, 82, 55);
    color: #fff;
}
.mon-btn-blue-deprecated:hover{
    background-color: hsl(214, 75%, 54%);
    background-image: -webkit-linear-gradient(center top , #4B95FC, #317EE2);
    background-image: -o-linear-gradient(center top , #4B95FC, #317EE2);
    background-image: -moz-linear-gradient(center top , #4B95FC, #317EE2);
    background-image: linear-gradient(center top , #4B95FC, #317EE2);
    border-color: hsl(218, 60%, 44%);
    color: #fff;
}
/* blue (new, more teal) */
.mon-btn-blue{
    background-color: hsla(205, 85%, 55%, 1);
    border-color: hsla(208, 68%, 48%, 1);
    color: #fff;
    background-image: none;
}
.mon-btn-blue:hover{
    background-color: hsla(207, 73%, 52%, 1);
    border-color: hsla(210, 55%, 40%, 1);
    color: #fff;
    background-image: none;
}
/* green */
.mon-btn-green{
    background-color: #3ABC41;
    background-image: -webkit-linear-gradient(center top , #36C436, #31B231);
    background-image: -o-linear-gradient(center top , #36C436, #31B231);
    background-image: -moz-linear-gradient(center top , #36C436, #31B231);
    background-image: linear-gradient(center top , #36C436, #31B231);
    border-color: #20A024;
    color: #fff;
}
.mon-btn-green:hover{
    background-color: #40A540;
    background-image: -webkit-linear-gradient(center top , #36C436, #249E28);
    background-image: -o-linear-gradient(center top , #36C436, #249E28);
    background-image: -moz-linear-gradient(center top , #36C436, #249E28);
    background-image: linear-gradient(center top , #36C436, #249E28);
    border-color: #1F7C23;
    color: #fff;
}
/* red */
.mon-btn-red{
    background-color: #d14836;
    background-image: -webkit-linear-gradient(center top , #dd4b39, #d14836);
    background-image: -o-linear-gradient(center top , #dd4b39, #d14836);
    background-image: -moz-linear-gradient(center top , #dd4b39, #d14836);
    background-image: linear-gradient(center top , #dd4b39, #d14836);
    border-color: #BA3327 #BA3327 #B73A2A;
    color: #fff;
}
.mon-btn-red-flat{
    background-image: none;
    font-family: Ariel, sans-serif;
    font-weight: 700;
    border-radius: 3px;
    
    border: 1px solid transparent;
    box-shadow: none;
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}
.mon-btn-red:hover{
    background-color: #c53727;
    background-image: -webkit-linear-gradient(center top , #dd4b39, #c53727);
    background-image: -o-linear-gradient(center top , #dd4b39, #c53727);
    background-image: -moz-linear-gradient(center top , #dd4b39, #c53727);
    background-image: linear-gradient(center top , #dd4b39, #c53727);
    border-color: #b0281a #b0281a #af301f;
    color: #fff;
}
.mon-btn-inline{
    margin-left: 50px;
}
/* pull-left (bootstrap) */
.mon-btn.pull-left{
    margin-left: 0px;
}

/* === avidsphere themed colors */
/* avidblue */
.mon-btn-avidblue{
    background-color: hsl(185, 65%, 41%);
    border-color: hsl(188, 61%, 39%);
    color: #fff;
    background-image: none;
}
.mon-btn-avidblue:hover{
    background-color: hsl(187, 62%, 40%);
    border-color: hsl(190, 57%, 36%);
    color: #fff;
    background-image: none;
}
/* avidblue */
.mon-btn-aviddarkblue{
    background-color: hsl(194, 100%, 38%);
    border-color: hsl(197, 95%, 36%);
    color: #fff;
    background-image: none; 
}
.mon-btn-aviddarkblue:hover{
    background-color: hsl(196, 97%, 37%);
    border-color: hsl(199, 91%, 33%);
    color: #fff;
    background-image: none;
}
/* avidpink */
.mon-btn-avidpink{
    background-color:  hsl(299, 39%, 49%);
    border-color: hsl(302, 28%, 40%);
    color: #fff;
    background-image: none;
}
.mon-btn-avidpink:hover{
    background-color: hsl(301, 30%, 46%);
    border-color: hsl(304, 26%, 37%);
    color: #fff;
    background-image: none;
}

/* --------------------------
 mon btn disabled
-------------------------- */
.mon-btn:hover.disabled,
.mon-btn:active.disabled,
.mon-btn:focus.disabled,
.mon-btn.disabled{
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
    /* css same as mon-btn default below */
    background-color: #f5f5f5;
    background-image: -webkit-linear-gradient(center top , #f5f5f5, #f1f1f1);
    background-image: -o-linear-gradient(center top , #f5f5f5, #f1f1f1);
    background-image: -moz-linear-gradient(center top , #f5f5f5, #f1f1f1);
    background-image: linear-gradient(center top , #f5f5f5, #f1f1f1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #444;
}

/* --------------------------
 mon btn group
-------------------------- */
.mon-btn-group{
    align-items: center;
    display: flex;
    margin-left: 3px;
    margin-right: 3px;
}


/*------------------------------------------------------------------------------
    popup
------------------------------------------------------------------------------*/
.popup-backdrop{
    z-index: 2100;
    opacity: 0.5;
    background-color: #000;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2100;
    /*transition: opacity 0.15s linear 0s;*/
    box-sizing: border-box;
}
.popup-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2110;
    width: 100%;
    height: 100%;
}
.popup {
    font-family: 'Roboto', sans-serif;
    width: 100%;
    max-width: 500px;
    margin: auto;
    top: 22%;
    padding: 0px 20px 0px 20px;
    height: auto;
    position: relative;
    /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.popup-item,
.popup-left,
.popup-right,
.popup-top{
    background-color: rgba(234, 235, 237, 0.95);
}
.popup-top{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /* margin-bottom: 1px; */
    height: auto;
}
.popup-top-inner{
    padding: 20px 12px 20px 12px;
}
.popup-title{
    color: #222;
    font-weight: 500;
    font-size: 16px;
}
.popup-desc{
    color: #222;
    font-size: 14px;
    line-height: 18px;
    padding-top: 7px;
}
.popup-desc > .item,
.popup-desc-spec{
   color: hsl(224, 8%, 52%);
   font-weight: 500;
}
.popup-hr{
    /*color: rgba(234, 235, 237, 0.6);
    background-color: rgba(234, 235, 237, 0.62);*/
    color: transparent;
    background-color: transparent;
}
.popup-option{
    font-size: 16px;
    color: #1068ED;
    color: #2E80EA;
    outline: none;
}
.popup-option > span{
   padding: 5px 8px;
}
.popup-option:hover{
    background-color: rgba(242, 243, 245, 0.99);
}
.popup-option:active{
    background-color: rgba(228, 229, 231, 0.87);
    transition: background-color 0.1s ease-in-out 0s;
    -webkit-transition: background-color 0.1s ease-in-out 0s;
}
.popup-option:focus > span{
   border: 1px dotted hsl(224, 8%, 52%);
   border-radius: 3px;
}
/* for side by side options */
.popup-bottom{
    height: 45px;
    line-height: 45px;
    padding: 0;
    margin: 0;
}
.popup-mid,
.popup-left,
.popup-right,
.popup-item{
    cursor: pointer;
}
.popup-mid,
.popup-left,
.popup-right{
    display: inline-block;
    overflow: hidden;
}
.popup-left{
    border-bottom-left-radius: 8px;
    width: -moz-calc(50% - 1px);
    width: -webkit-calc(50% - 1px);
    width: calc(50% - 1px);
    float: left;
}
.popup-mid{
    background-color: transparent;
    color: rgba(0, 0, 0, 0);
    width: 1px;
    float: left;
}
.popup-right{
    border-bottom-right-radius: 8px;
    width: 50%;
    float: left;
}
/* for listed options */
.popup-listed{
    height: auto;
}
.popup-item{
    display:block;
    width: 100%;
}
.popup-listed .popup-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


/* retina */
.retina .popup-left{
    width: -moz-calc(50% - 0.5px);
    width: -webkit-calc(50% - 0.5px);
    width: calc(50% - 0.5px);
}
.retina .popup-mid{
    width: 0.5px;
}

/* --------------------------
 popup changes for avidsphere
-------------------------- */
.popup-wrapper {
    position: fixed;
}


/* -----------------------------------------------------------------------------
 close-btn
------------------------------------------------------------------------------*/
.close-btn{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    cursor: pointer;
    padding: 0; 
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    color: #000;
    float: right;
    font-size: 24px;
    line-height: 24px;
    opacity: 1;
    outline: none;
    text-shadow: 0 -1px 0px rgba(0, 0, 0, .38), 0 -1px 1px rgba(0, 0, 0, .38),
        0 1px 0px rgba(255, 255, 255, .9), 0 1px 1px rgba(255, 255, 255, .9);
    color: rgba(188, 188, 188, 1);
}
.close-btn:focus,
.close-btn:hover {
    cursor: pointer;
    text-decoration: none;
    color: rgba(170, 170, 170, 1);
    text-shadow: 0 -1px 0px rgba(0, 0, 0, .47), 0 -1px 1px rgba(0, 0, 0, .47),
                 0 1px 0px rgba(255, 255, 255, 1), 0 1px 1px rgba(255, 255, 255, 1);
}
.close-btn:focus{
    color: rgba(0, 166, 220, 1);
    text-shadow: 0 -1px 0px rgba(0, 166, 220, .38),
        0 -1px 0px rgba(0, 0, 0, .55), 0 -1px 1px rgba(0, 0, 0, .55),
        0 1px 0px rgba(255, 255, 255, 1), 0 1px 1px rgba(255, 255, 255, 1);
}
.close-btn:active{
    color: rgba(0, 175, 255, 1);
    text-shadow: 0 -1px 0px rgba(0, 175, 255, .38),
        0 -1px 0px rgba(0, 0, 0, .55), 0 -1px 1px rgba(0, 0, 0, .55),
        0 1px 0px rgba(255, 255, 255, 1), 0 1px 1px rgba(255, 255, 255, 1);
}


/* -----------------------------------------------------------------------------
 dialog, (but named popup frame)
------------------------------------------------------------------------------*/
/* added for avidsphere component */
.popup-frame-wrapper{
   position: fixed;
   z-index: 2000;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
}

.popup-frame-body{
    /* background-color: rgba(254, 254, 251, 1); yellower */
    background-color: rgba(254, 253, 250, 1); /* #FEFDFA */
}
.popup-frame-backdrop,
.popup-frame{
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    box-sizing: border-box;
}
.popup-frame-backdrop{
    opacity: 0.5;
    background-color: #000;
    z-index: 2000;
}
.popup-frame{
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0 none;
    z-index: 2001;
    display: block;
    -webkit-overflow-scrolling:touch;
    height: 100%;
}

/* --------------------------
 inner - actual popup frame
-------------------------- */
.popup-frame-inner{
    box-sizing: border-box;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    background-color: rgba(250, 250, 250, 1);
    border: none;
    border-radius: 0px; 
    outline: 0 none;
    position: relative;
    border-radius: 3px;
    border: 1px solid rgba(80,80,80,1);
    
    /* from buffer */
    margin: 30px auto;
    margin-top: 50px;
    width: 600px;
    position: relative;
    
    transition-duration: .3s;
}
.retina .popup-frame-inner{
    border-width: 0.5px;
}
@media (max-width: 767px) {
    .popup-frame-inner{
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
        /* from buffer */
        width: auto;
        margin: 10px;
    }
    .popup-frame{
        padding-top: 0 !important;
        padding-left: 0 !important;
    }
}
/* size width
============================*/
.popup-frame.wide .popup-frame-inner{
    width: 680px;
}
.popup-frame.xwide .popup-frame-inner{
    width: 800px;
}
.popup-frame.xxwide .popup-frame-inner{
    width: 1000px;
}
.popup-frame.xxxwide .popup-frame-inner{
    width: 1200px;
}
@media (max-width: 730px) {
    .popup-frame.wide .popup-frame-inner{
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
        /* from buffer */
        width: auto;
        margin: 10px;
    }
    .popup-frame.wide{
        padding-top: 0 !important;
        padding-left: 0 !important;
    }
}
@media (max-width: 850px) {
    .popup-frame.xwide .popup-frame-inner{
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
        /* from buffer */
        width: auto;
        margin: 10px;
    }
    .popup-frame.xwide{
        padding-top: 0 !important;
        padding-left: 0 !important;
    }
}
@media (max-width: 1050px) {
    .popup-frame.xxwide .popup-frame-inner{
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
        /* from buffer */
        width: auto;
        margin: 10px;
    }
    .popup-frame.xxwide{
        padding-top: 0 !important;
        padding-left: 0 !important;
    }
}
@media (max-width: 1250px) {
    .popup-frame.xxxwide .popup-frame-inner{
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
        /* from buffer */
        width: auto;
        margin: 10px;
    }
    .popup-frame.xxxwide{
        padding-top: 0 !important;
        padding-left: 0 !important;
    }
}
/* size height
============================*/
.popup-frame.height-500 .popup-frame-body{
    height: 500px;
}
.popup-frame.height-600 .popup-frame-body{
    height: 600px;
}


/* --------------------------
 popup frame header
-------------------------- */
.popup-frame-header{
    border-bottom: 1px solid transparent;
    min-height: 16.43px;
    padding: 15px;
    box-sizing: border-box;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 1px solid transparent;
        background: -webkit-linear-gradient(180deg, rgba(254, 253, 250, 1) 0%, rgba(230, 232, 234, 1) 80%);       
        background: -o-linear-gradient(180deg, rgba(254, 253, 250, 1) 0%, rgba(230, 232, 234, 1) 80%);       
        background: -moz-linear-gradient(180deg, rgba(254, 253, 250, 1) 0%, rgba(230, 232, 234, 1) 80%);       
        background: linear-gradient(180deg, rgba(254, 253, 250, 1) 0%, rgba(230, 232, 234, 1) 80%);
}
.popup-frame-header:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 55px;
    border: 0.5px solid rgba(255,255,255, .9);
    background: transparent;
    box-sizing: border-box;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: none;
}
.popup-frame-title{
    margin: 0;
    margin-left: 6px;
    line-height: 25.7px;
    font-family: 'Montserrat', Sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #555;
    cursor: default;
}
/* bluish tone */
.popup-frame-title{
    color: hsla(205, 11%, 42%, 1);
}


/* --------------------------
 popup frame body
-------------------------- */
.popup-frame-body{
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* --------------------------
 popup frame footer
-------------------------- */
.popup-frame-footer{
    box-sizing: border-box;
    border-top: 0.5px solid transparent;
    padding: 15px;
    text-align: right;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top: 1px solid transparent;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2); 
    background:rgba(230, 232, 234, 1);
}
.retina .popup-frame-footer{
    border-top-width: 0.5px;
}
/* change to overflow-y: hidden -- on frame-footer*/
.popup-frame-footer::after, .popup-frame-footer::before {
    content: " ";
    display: table;
}
.popup-frame-footer::after {
    clear: both;
}
/* margins for footer buttons */
.popup-frame-footer button{
    margin-left: 4px;
}


/* --------------------------
 border color & box shadow 
-------------------------- */
.header,
.popup-frame-header{
    border-color: rgba(195, 195, 195, 1);
    border-color: hsla(205, 11%, 78%, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.footer,
.popup-frame-footer{
    border-color: rgba(200, 200, 200, 1);
    border-color: hsla(205, 11%, 80%, 1);
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.18);
}
.retina .header,
.retina .popup-frame-header{
    border-bottom-width: 0.5px;
}
.retina .footer,
.retina .popup-frame-footer{
    border-top-width: 0.5px;
}
/* box shadow fix */
.popup-frame-body{
    z-index: 100;
}
.popup-frame-footer,
.popup-frame-header{
    position: relative;
    z-index: 200;
}

/* --------------------------
 popup frame close
-------------------------- */
.popup-frame-close{
    font-size: 55px;
    height: 42px;
    line-height: 30px;
    padding: 0;
    position: absolute;
    right: 15px;
    top: 0;
}
.popup-frame-close:hover,
.popup-frame-close:focus{

}

/* --------------------------
 popup frame changes for avidsphere
-------------------------- */
.popup-frame-inner{
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.65);
    border: none;
}