*{
	box-sizing:border-box;
}
/*************************************************************************
		CONTAINERS
*************************************************************************/
/* BOOTSTRAP v3.4.1 CLASS OVERRIDE: CONTAINER (.container, .row) */
/* If container/row and max-width outline belowed are necessary and/or ideal for project, uncomment. */

/*.master-container{
	background-color:#fff;
	max-width:1336px;
	margin:0 auto;
}
body{
	background-color:#d4d4d4;
}
.container{
	width:calc(100% - 16px);
	margin-left:8px;
	margin-right:8px;
	padding-left:8px;
	padding-right:8px;
}
.row{
	margin-left:-8px;
	margin-right:-8px;
}
@media(min-width:768px){
	.container{
		width:calc(100% - 48px);
		margin-left:24px;
		margin-right:24px;
		padding-left:12px;
		padding-right:12px;
	}
	.row{
		margin-left:-12px;
		margin-right:-12px;
	}
}
@media(min-width:1024px){
	.container{
		width:calc(100% - 88px);
		margin-left:44px;
		margin-right:44px;
	}
}*/
/**********************************************************************
		TYPOGRAPHY
**********************************************************************/
/* BOOTSRAP v3.4.1 OVERRIDE: HEADERS (h1, h2, h3, h4, h5, h6)*/
.h1, .h2, .h3, .h4, .h5, .h6,
.cta, .btn, .btn-primary, .btn-default{
	font-family: 'Helvetica Now Display', Helvetica, sans-serif;
	font-weight: 800;
	margin:0;
	padding:0;
}
.h1 { font-size:36px; line-height:38px; }
.h2 { font-size:30px; line-height:34px; }
.h3 { font-size:27px; line-height:31px; }
.h4 { font-size:24px; line-height:27px; }
.h5 { font-size:18px; line-height:22px; }
.h6 { font-size:16px; line-height:23px; letter-spacing:0.4px; color:#736e7d }
@media(min-width:768px){
	.h1 { font-size:48px; line-height:50px;}
	.h2 { font-size:38px; line-height:40px; }
	.h3 { font-size:30px; line-height:34px; }
	.h4 { font-size:26px; line-height:29px; }
}
@media(min-width:1024px){
	.h1 { font-size:59px; line-height:58px; }
	.h2 { font-size:44px; line-height:46px; }
}
@media(min-width:1336px){
	.h1 { font-size:70px; line-height:72px; }
	.h2 { font-size:48px; line-height:50px; }
	.h3 { font-size:32px; line-height:36px; }
	.h4 { font-size:28px; line-height:31px; }
	.h5 { font-size:20px; line-height:24px; }
}

/* Body Text */
.large-body, .default-body, .fid-legal, .fid-label{
	font-family: 'Helvetica Now Text', Helvetica, sans-serif;
	font-weight: normal;
}
.large-body{
	font-size:16px;
	line-height:24px;
	color:#000;
}
.default-body{
	color:#000;
	font-size:14px;
	line-height:22px;
}
.gray-body{
    font-size:14px;
    line-height:22px;
    color:#736e7d;
}
.fid-legal{
	color:#736e7d;
	font-size:12px;
	line-height:18px;
}
.fid-label{
    font-size:12px;
    line-height:12px;
    color:#736e7d;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* Adjustments in Text */
.nobr{ white-space:nowrap; }


/**********************************************************************
		HEADERS
**********************************************************************/
.fid-simple-header{
    height:72px;
    background-color:#000;
    display:flex;
    align-items:center;
}
.fid-simple-header.header-shadow{
    border-bottom:1px solid #d4d4d4;
    box-shadow:0px 5px 25px 0px rgba(0,0,0,0.35);
    margin-bottom:36px;
}
.fid-simple-header img.fid-header-logo,
.sxm-simple-header img.fid-header-logo,
.sxm-header img.fid-header-logo{
    height:26px;
}

.sxm-simple-header,
.sxm-header{
    height:72px;
    position:relative;
    display:flex;
    align-items:center;
    background-color:rgba(45,42,43,0.7);
    transition:background-color .3s;
}
.sxm-simple-header:hover,
.sxm-header:hover{
    background-color:#000;
    box-shadow:0 15px 15px 0 rgba(0,0,0,0.15);
}
.sxm-header .fid-nav-wrapper{
    display:flex;
    flex-direction:row;
}
.sxm-header a.fid-nav-link{
    margin-left:16px;
}
.sxm-simple-header.w-links,
.sxm-header.w-links{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 15px;
}
.sxm-simple-header a.fid-nav-link,
.sxm-header a.fid-nav-link{
    white-space:nowrap;
    color:#fff;
    font-size:12px;
    font-weight:700;
    margin-bottom:-4px;
    padding-bottom:2px;
    border-bottom:3px solid transparent;
}
.sxm-simple-header a.fid-nav-link:hover,
.sxm-simple-header a.fid-nav-link:focus,
.sxm-simple-header a.fid-nav-link:active,
.sxm-header a.fid-nav-link:hover,
.sxm-header a.fid-nav-link:focus,
.sxm-header a.fid-nav-link:active{
    border-color:#fff;
    text-decoration:none;
}
@media(max-width:767px){
    .sxm-header .fid-nav-wrapper{
        display:flex;
        flex-direction:column;
        width:90%;
        position:absolute;
        background-color:#fff;
        top:72px;
        left:0px;
        overflow-y:hidden;
    }
    .sxm-header a.fid-nav-link{
        color:#000;
        padding:16px;
    }
}
@media(min-width:768px){
    .sxm-simple-header .fid-hmenu{
        display:none;
    }
    .sxm-header .fid-nav-links{
        flex-direction:row;
    }
}
@media(min-width:1024px){
    .fid-simple-header.sxm-simple-header.w-links{
        padding:0 58px;
    }
}

/**********************************************************************
		JUMBOTRON / HERO
**********************************************************************/
/* BOOTSTRAP v3.4.1 OVERRIDE: JUMBOTRON */
.jumbotron{
	background-color:#fff;
	color:#000;
}
.jumbotron img{
    width:100%;
    max-width:100%;
}
.jumbotron .jumbotron-text-wrapper{
    margin-top:24px;
}
.jumbotron .jumbotron-text-wrapper h1{
    margin-bottom:12px;
}
.jumbotron .jumbotron-text-wrapper p{
    margin-bottom: 24px;
}
.jumbotron .jumbotron-text-wrapper .standard-btn{
    margin:0;
}
@media(min-width:768px){
	.jumbotron{
		background-position: center;
		background-size:cover;
		background-repeat:no-repeat;
		padding:96px 0;
		margin-bottom:0;
        border-radius:0 !important;
	}
    .jumbotron img{
        display:none;
    }
    .jumbotron .jumbotron-text-wrapper{
        margin:0;
        width:65%;
    }
	.jumbotron .jumbotron-text-wrapper h1{
		color:#fff;
		margin-bottom:15px;
		margin-top:0;
	}
    .jumbotron .jumbotron-text-wrapper p{
        color:#fff;
    }
    .jumbotron .standard-btn .btn-primary{
        background-color:#fff;
        border-color:#fff;
        color:#0000eb;
    }
    .jumbotron .standard-btn .btn-primary:hover,
    .jumbotron .standard-btn .btn-primary:focus,
    .jumbotron .standard-btn .btn-primary:active,
    .jumbotron .standard-btn .btn-primary:active:focus{
        color:#fff;
        background-color:transparent;
        border-color:#fff;
    }
}
@media(min-width:1024px){
	.jumbotron{
		padding-bottom:144px;
	}
}

/* Jumbotron without image / NO BOOTSTRAP OVERRIDE */
.jumbotron.fid-no-img{
	background-color:#0000eb;
	color:#fff;
	padding-top:20px;
	padding-bottom:20px;
}
@media(min-width:768px){
	.jumbotron.fid-no-img{
		padding-top:50px;
		padding-bottom:88px;
	}
}

/**********************************************************************
		CONTENT BASE
**********************************************************************/
/* Overlapping Main Content Base */
.overlap{
	background-color:#fff;
}
@media(min-width:768px){
	.overlap{
		margin-top:-48px;
		padding-top:72px;
        text-align:center;
	}
}

/**********************************************************************
		CARDS
**********************************************************************/
.standard-card{
	background-color:#fff;
	border: 1px solid #d4d4d4;
    padding:32px;
}

/* Minimal Card */
.minimal-card{
	border:4px solid #f5f5f5;
    padding:24px 16px;
    text-align:center;
}
.minimal-card p{
    color:#736e7d;
    margin-bottom:8px;
}
.minimal-card h5{
    margin-bottom:8px;
}
.minimal-card-links{
    padding-left:0px;
    margin:0;
    list-style-type:none;
}
.minimal-card-links li{
    display:inline-block;
    margin-bottom:8px;
}
.minimal-card-links .border-right{
    border-right:1px solid #d4d4d4;
    padding-right:16px;
    margin-right:16px;
}

/* Clickable Card */
.fid-clickable-card{
	background-color:#fff;
    padding:20px;
    margin:8px 0;
    border:0 solid #fff;
    transition-property:width, margin-bottom, border-width, box-shadow;
    position:relative;
}
.fid-clickable-card:before{
    content:'';
    width:100%;
    height:100%;
    top:50%;
    left:50%;
    position:absolute;
    background-color:#fff;
    transform:translate3d(-50%, -50%, 0);
    box-shadow:0 2px 15px -4px rgba(0,0,0,0.15);
    transition:width .3s ease-in-out, height .3s ease-in-out;
    z-index:-1;
}
.fid-clickable-card:hover:before,
.fid-clickable-card:focus:before,
.fid-clickable-card:active:before{
    width:calc(100% + 16px);
    height:calc(100% + 16px);
    box-shadow:0 0 30px 10px rgba(0,0,0,0.1);
}
.fid-clickable-card .fid-label{
    margin-bottom:8px;
}
.fid-clickable-card a.h5{
    display:block;
    margin-bottom:4px;
}
.fid-clickable-card a.h5:hover,
.fid-clickable-card a.h5:focus{
    color:#006ed7;
    text-decoration:underline;
}
.fid-clickable-card .fid-card-p{
    margin-bottom:24px;
}

@media(min-width:768px){
    .minimal-card{
        padding:32px;
    }
    .fid-clickable-card{
        margin:0;
    }
}

/* Tiled Img-Text Card */
.img-cards-wrapper{
    background-color:#fff;
}
.img-cards-wrapper .img-cards-row{
    display:flex;
    flex-wrap:wrap;
}
.img-cards-wrapper .img-cards-row.reverse{
    flex-direction:row-reverse;
}
.img-cards-wrapper .img-card,
.img-cards-wrapper .img-card-text{
    position:relative;
    width:100%;
}
.img-cards-wrapper .img-card{
    background-position:left center;
    background-size:cover;
    background-repeat:no-repeat;
}
.img-cards-wrapper .img-card-text{
    display:flex;
    align-items:center;
    justify-content:center;
}
.img-cards-wrapper .img-card-text .text-card{
    width:80%;
}
@media(min-width:768px){
    .img-cards-wrapper .img-card,
    .img-cards-wrapper .img-card-text{
        flex:0 0 50%;
        max-width:50%;
    }
}
@media(min-width:992px){
    .img-cards-wrapper .img-card{
        height:550px;
    }
    .img-cards-wrapper .img-card-text .text-card{
        width:50%;
    }
}

/**********************************************************************
		LISTS
**********************************************************************/
.fid-checklist{
    width:100%;
    max-width:100%;
    height:auto;
    background-color:#fff;
    padding:16px 32px 24px 16px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    border:0 solid #fff;
    transition-property: width, margin-bottom, border-width, box-shadow;
    position:relative;
}
.fid-checklist:before{
    content:'';
    width:100%;
    height:100%;
    top:50%;
    left:50%;
    position:absolute;
    background-color:#fff;
    transform:translate3d(-50%, -50%, 0);
    box-shadow:0 2px 15px -4px rgba(0, 0, 0, 0.15);
    transition:width .3s ease-in-out, height .3s ease-in-out;
    z-index:-1;
}
.fid-checklist:focus:before,
.fid-checklist:hover:before,
.fid-checklist:active:before{
    width:calc(100% + 16px);
    height:calc(100% + 16px);
    box-shadow:0 0 30px 10px rgba(0,0,0,0.1);
}
.fid-checklist p{
    margin-bottom:0;
}
.fid-checklist .checklist-1{
    font-weight:bold;
    flex:0 0 10%;
}
.fid-checklist .checklist-2{
    flex:0 0 50%;
}
.fid-checklist .checklist-3{
    flex:0 0 40%;
    text-align:right;
}

@media(min-width:768px){
    .fid-checklist{
        height:72px;
        padding:0 24px 0 40px;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }
}

/**********************************************************************
		VIDEOS
**********************************************************************/
/* Responsive Video */
.video-wrapper{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-wrapper iframe{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
}


/**********************************************************************
		LINKS
**********************************************************************/
a{
    color:#006ed7;
    text-decoration:none;
}
a:hover,
a:active,
a:focus{
    color:#006ed7;
    text-decoration:underline;
}

.inline{
	color:#006ed7;
	border-bottom:2px solid #006ed7;
	padding-bottom:4px;
	text-decoration:none;
}
.inline:hover, .inline:focus{
	color:#006ed7;
	padding-bottom:2px;
	text-decoration:none;
}
.legal-link, .legal-link:hover, .legal-link:focus{
	color:#006ed7;
}

.cta{
	font-family: 'Helvetica Now Display', Helvetica, sans-serif;
	font-weight:800;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:1.7px;
	color:#0000eb;
	padding-bottom:4px;
	border-bottom:2px solid transparent;
	text-decoration:none;
}
.cta:hover, .cta:focus{
	border-bottom:2px solid #0000eb;
	text-decoration:none;
}

/**********************************************************************
		BUTTONS
**********************************************************************/
/* Use the class below for containers housing btns for a max-width of 320px */
.standard-btn{max-width:320px;}
/* BOOTSTRAP v3.4.1 OVERRIDE: BUTTONS (.btn, .btn-primary, .btn-info) */
.btn{
	font-size:16px;
	font-weight:800;
	line-height:22px;
	letter-spacing:2px;
	height:56px;
	width:100%;
	text-transform:uppercase;
	border:4px solid transparent;
	border-radius:0;
	display:flex;
    justify-content:center;
    align-items:center;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn:active:focus{
	box-shadow:none;
	outline:none;
}
/* Primary Button / SXM Blue */
.btn.btn-primary{
	color:#fff;
	background-color:#0000eb;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary:active:focus{
	background-color:transparent;
	color:#0000eb;
	border-color:#0000eb;
}
/* Default Button / On Dark Background */
.btn.btn-default{
	color:#0000eb;
	background-color:#fff;
}
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default:active:focus{
	background-color:transparent;
	color:#fff;
	border-color:#fff;
}
/* Secondary Button (Bootstrap's Info Button) / Light Blue */
.btn.btn-info{
	color:#0000eb;
	background-color:#e9eef8;
}
.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:active,
.btn.btn-info:active:focus{
	background-color:transparent !important;
	border-color:#e9eef8 !important;
	color:#0000eb !important;
}

/* Disabled Button */
button.btn[disabled],
button.btn[disabled]:hover{
	background-color: #d4d4d4;
	color:#fff;
	border: 4px solid #d4d4d4;
}


/***********************
	PLAY BUTTON
***********************/
.play-container{
	width:56px;
	height:56px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.primary-play span.play,
.secondary-play span.play{
	width:0;
    height:0;
    border-top:8px solid transparent;
    border-left:12px solid #fff;
    border-bottom:8px solid transparent;
}
.secondary-play span.play{border-left-color:#0000eb;}
.play-btn{
	display: flex;
	justify-content: center;
	align-items: center;
    padding-left:2px;
	width:48px;
	height:48px;
	border-radius: 50%;
	transition: all 0.3s ease-in-out;
}
.play-btn:hover,
.play-btn:active,
.play-btn:active:hover,
.play-btn:focus{
	text-decoration: none;
	outline: none;
	transform: scale(1.167);
}
.primary-play{
	background-color:#0000eb;
	color:#fff;
	box-shadow:0 5px 9px 0 rgba(0,0,235,0.3);
}
.primary-play:hover,
.primary-play:active,
.primary-play:active:hover,
.primary-play:focus{
	color:#fff;
}
.secondary-play{
	background-color:#e9eef8;
	color:#0000eb;
	box-shadow:0 5px 9px 0 rgba(110,130,164,0.4);
}
.secondary-play:hover,
.secondary-play:active,
.secondary-play:active:hover,
.secondary-play:focus{
	color:#0000eb;
}
.play-btn.play-sm{
	width:40px;
	height:40px;
}
.play-btn.play-sm:hover,
.play-btn.play-sm:active,
.play-btn.play-sm:active:hover,
.play-btn.play-sm:focus{
	transform: scale(1.167);
}

/**********************************************************************
		MODAL
**********************************************************************/
.modal.sxm-modal{
    padding:0;
}
.modal.sxm-modal .modal-content{
    border:0;
    border-radius:0;
}
/***** Modal Header *****/
.modal.sxm-modal .modal-header{
    background-color:#322790;
    padding:12px 16px 12px 8px;
    display:flex;
    align-items:center;
}
.modal.sxm-modal .modal-title{
    flex-grow:2;
    text-align:center;
    color:#fff;
    font-weight:bold;
    font-size:16px;
    height:24px;
}
.modal.sxm-modal button.back,
.modal.sxm-modal button.close{
    width:auto;
    color:#fff;
}
.modal.sxm-modal button.back{
    padding:0;
    cursor:pointer;
    background:0 0;
    border:0;
}
.modal.sxm-modal button.back .modal-chevron::before{
    border-style:solid;
    border-width:3px 3px 0 0;
    border-color:#fff;
    content:'';
    display:inline-block;
    height:12px;
    width:12px;
    position:relative;
    transform:rotate(-135deg);
    vertical-align:middle;
}
.modal.sxm-modal button.close{
    float:none;
    text-shadow:none;
    margin:0;
    padding:0;
    opacity:1;
}
.modal.sxm-modal button.close span{
    font-size:32px;
    font-weight:400;
}

/***** Modal Body *****/
.modal.sxm-modal .modal-body{
    padding:24px 16px 0 16px;
    max-width:100%;
}

/***** Modal Footer *****/
.modal.sxm-modal .modal-footer{
    border-top:none;
    text-align:initial;
    padding:0 16px 24px 16px;
}

@media(max-width:768px){
    .modal.sxm-modal .modal-dialog{
        margin:0;
    }
    .modal.sxm-modal .modal-content{
        height:100vh;
    }
}
@media(min-width:768px){
    /***** Modal Body *****/
    .modal.sxm-modal .modal-body{
        padding:32px 40px 0 40px;
    }

    /***** Modal Footer *****/
    .modal.sxm-modal .modal-footer{
        padding:0 40px 32px 40px;
    }
}

/**********************************************************************
		TOOL TIP
**********************************************************************/
.fid-tooltip-wrapper{
    position:relative;
}
.fid-tooltip path {
    fill: none;
    stroke: #736e7d;
    stroke-width: 1.6px;
    fill-rule: evenodd;
}
.fid-tooltip circle{
    fill:none;
    stroke:#736e7d;
    stroke-width:1.6px;
}
.fid-tooltip:hover path{
    stroke:#fff;
}
.fid-tooltip:hover circle{
    fill:#736e7d;
}
.fid-tooltip-modal{
    display:inline-block;
    width:216px;
    height:auto;
    padding:16px;
    background-color:#fff;
    box-shadow:0 0 10px 5px rgba(0,0,0,.10);
}
.fid-tooltip-modal p{margin:0;}
.fid-tooltip-modal.right,
.fid-tooltip-modal.bottom{
    display:none;
    position:absolute;
    z-index:100;
}
.fid-tooltip-modal.right{
    left:28px;
    top:-10px;
}
.fid-tooltip-modal.bottom{
    left:-182px;
    top:28px;
}
/**********************************************************************
		FORM ELEMENTS
**********************************************************************/
/* BOOTSTRAP 3.4.1 OVERRIDE: INPUT FIELDS (.form-group, .form-control) */

/*Form Elements are by default 56px in height with a margin-bottom of 28px.  If a more slimmer design is needed (less height/less margin), use the adjustment code below and change margin/height to custom measurement*/

/* Slim Form Adjustment */
/*
    .form-group{ height:48px; margin-bottom:12px; }

    .form-group .form-control,
    .form-group .select-control { height:48px; }

    .form-control ~ label.label-overlay.hover,
    .form-control:focus ~ label.label-overlay,
    .select-control ~ label.label-overlay.hover,
    .select-control:focus ~ label.label-overlay{ bottom:48px; }

    .label.label-overlay{ bottom:34px; font-size:14px; }
*/

.form-header{
    margin:2em 0;
    text-align:center;
}

.form-group{
	height:56px;
	margin-bottom:28px;
}
.form-group .form-control,
.form-group .select-control,
.input-group .form-control{
	height:56px;
	padding: 10px 0 0 16px;
	font-size:14px;
	line-height:22px;
	color:#000;
	border:1px solid #736e7d;
	border-radius:0;
	box-shadow:none;
	transition:initial;
}
.input-group .form-control{
	border-right:none;
}
.form-group .form-control:focus,
.form-group .select-control:focus,
.input-group .form-control:focus{
	border-color:#736e7d;
	box-shadow: 0 15px 15px 0 rgba(0,0,0,0.05);
	border-left:4px solid #006ed7;
	padding-left:13px;
	outline: none;
}

/* Change Autocomplete styles in Chrome */
.form-group .form-control:-webkit-autofill,
.form-group .form-control:-webkit-autofill:hover,
.form-group .form-control:-webkit-autofill:focus,
.form-group .select-control:-webkit-autofill,
.form-group .select-control:-webkit-autofill:hover,
.form-group .select-control:-webkit-autofill:focus{
	-webkit-box-shadow: 0 0 0 100px #fff inset;
}
/* Change Autocomplete styles in IE */
.form-group .form-control.edge-autoSuggestFieldFilled,
.form-group .select-control.edge-autoSuggestFieldFilled{
	background-color: #fff !important;
}

/* NOTE: Accompanying JS File (siriusxm_theme_scripts.js) must be used in order for the label-overlay effect to work.  In addition, it must be used in conjunction with the Bootstrap classes .form-group and .form-control */
label.label-overlay{
	margin:0;
	position: relative;
	bottom:40px;
	left:17px;
    font-size:14px;
    line-height:22px;
	font-weight:normal;
	color:#735e7d;
	transition:bottom .35s ease, font-size .35s ease;
}
.form-control:focus ~ label.label-overlay, 
.form-control ~ label.label-overlay.hover,
.select-control:focus ~ label.label-overlay,
.select-control ~ label.label-overlay.hover{
	font-size:12px;
	bottom:56px;
}

/* SELECT DROPDOWN */
.form-group .select-control {
    display:block;
    width:100%;
    background-color:#fff;
    background-image:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    appearance:none;
}
/* Hide default dropdown arrow on IE */
.form-group .select-control::-ms-expand{display:none;}

.form-group span.chevron{float:right;height:0;}
.form-group span.chevron::before{
    border-style:solid;
    border-width:2px 2px 0 0;
    content:'';
    display:inline-block;
    height:8px;
    width:8px;
    position:relative;
    transform:rotate(135deg);
    vertical-align:top;
    top:-32px;
    right:16px;
}
.form-group .select-control:focus + span.chevron::before{
    transform:rotate(-45deg);
}

/* TEXTAREA */
.form-group.textarea{
    height:122px !important;
}
.form-group.textarea .form-control{
    height:122px !important;
    resize:none;
    padding-top:18px;
}
.form-group.textarea label.label-overlay{
    bottom:114px;
}
.form-group.textarea .form-control:focus ~ label.label-overlay,
.form-group.textarea .form-control ~ label.label-overlay.hover{
    bottom:122px;
}

/* INPUT W/ BUTTONS */
/* BOOSTRAP 3.4.1 OVERRIDE: INPUT GROUPS (.input-group, .input-group-btn) */
.input-group{
	height:56px;
	margin-bottom:28px;
}
.input-group-btn>.btn-info{
	width:136px;
	border:1px solid #736e7d;
	border-left:none;
	padding-top:0;
}
.input-group-btn>.btn-info:active,
.input-group-btn>.btn-info:active:focus{
	color: #0000eb;
	background-color:transparent;
	box-shadow:none;
	border:1px solid #736e7d;
	border-left: none;
}
.input-group-btn{
	vertical-align:top;
}
.input-group .form-control:focus{
	border-right:none;
}

/*
NOTE: "label-group" class to be used in conjunction with "label-overlay"
And it must also be used with accompanying JS File "Siriusxm_theme_scripts.js"
*/
.input-group label.label-group{
	position: absolute;
	bottom:16px;
	z-index:4;
}
.form-control:focus ~ label.label-group,
.form-control ~ label.label-group.hover{
	bottom:32px;
}


/* DISABLED INPUT FIELDS */
/* Input Field */
.form-control[disabled], .select-control[disabled], input[disabled]{
	border:1px solid #eaeaea;
	background-color:#f5f5f5;
}
/* Input w/ Button*/
.form-control:disabled ~ .input-group-btn>.btn{
	color: #736e7d;
	background-color:#f5f5f5;
	border: 1px solid #eaeaea;
	border-left:none;
	opacity:1;
}

/* REQUIRED TEXT STYLE */
.input-required{
    color:#d4d4d4;
}

/* ERROR TEXT / ERROR BORDER */
.form-group span.input-error,
span.input-error{
	font-size: 12px;
	line-height:16px;
	font-weight: 700;
	color:#d90909;
	display:block;
	position: relative;
	top:-16px;
}
.form-group .form-control.error-border,
.form-group .select-control.error-border{
	border: 1px solid #d90909;
}


/**********************************************************************
		CHECKBOXES / RADIO BUTTONS / TOGGLE BUTTONS
**********************************************************************/
/* CHECKBOXES / RADIO / TOGGLE BUTTONS common styles */
div.radio-group,
div.checkbox-group,
div.toggle-group{
	margin-bottom:28px;
}
div.checkbox,
div.radio,
div.toggle{
	margin-top:12px;
	margin-bottom:12px;
	position:relative;
}
div.checkbox+div.checkbox,
div.radio+div.radio,
div.toggle+div.toggle{
	margin-top:12px;
}
.checkbox>label.checkbox-label,
.radio>label.radio-label,
.toggle>label.toggle-label{
	padding-left:28px;
}
.checkbox>.checkbox-label>input[type="checkbox"],
.radio>.radio-label>input[type="radio"],
.toggle>.toggle-label>input[type="checkbox"]
{
	position: absolute;
	opacity:0;
	cursor: pointer;
	height:0;
	width:0;
}
.checkbox>.checkbox-label>.checkbox-custom,
.radio>.radio-label>.radio-custom{
	position: absolute;
	top:1px;
	left:0px;
	height:20px;
	width:20px;
	background-color:transparent;
	border: 2px solid #736e7d;
}
.checkbox>.checkbox-label>input:checked ~ .checkbox-custom,
.radio>.radio-label>input:checked ~ .radio-custom,
.toggle>.toggle-label>input:checked ~ .toggle-custom{
	background-color:#006ed7;
	border-color:#006ed7;
}
/* CHECKBOXES */
.checkbox>.checkbox-label>.checkbox-custom::after{
	content:"";
	position: absolute;
	left:4px;
	top: 0px;
	height:0px;
	width:0px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity:0;
}
.checkbox>.checkbox-label>input:checked ~ .checkbox-custom::after{
	width:8px;
	height:12px;
    opacity:1;
}

/* Validation Checkbox */


/* RADIO BUTTONS */
.radio>.radio-label>.radio-custom{
	border-radius:50%;
}
.radio>.radio-label>.radio-custom::after{
	content:"";
	position: absolute;
	top:0px;
	left:0px;
	width:0px;
	height:0px;
	border:2px solid transparent;
	border-radius:50%;
	background-color:transparent;
}
.radio>.radio-label>input:checked ~ .radio-custom::after{
	width:16px;
	height:16px;
	border-color:#fff;
	background-color:#006ed7;
}

/* TOGGLE BUTTON */
.toggle>label.toggle-label{
	position: relative;
	display:block;
	width:40px;
	height:20px;
	border:2px solid transparent;
	border-radius:20px;
}
.toggle>.toggle-label>.toggle-custom{
	position: absolute;
	top:0;
	left:0;
	width:40px;
	height:20px;
	background-color:#736e7d;
	border:2px solid #736e7d;
	border-radius:20px;
	-webkit-transition: .4s;
	transition:.4s;
}
.toggle>.toggle-label>.toggle-custom::before{
	position:absolute;
	content:"";
	height:16px;
	width:16px;
	left:0;
	top:0;
	background-color:#fff;
	border-radius:50%;
	-webkit-transition:.4s;
	transition:.4s;
}
.toggle>.toggle-label>input:checked ~ .toggle-custom::before{
	-webkit-transform: translate(20px);
	-ms-transform:translate(20px);
	transform: translate(20px);
}

/**********************************************************************
		Icons
**********************************************************************/
.lg-checkmark{
    display:inline-block;
    height:32px;
    width:16px;
    border:solid 6px #006ed7;
    border-left:transparent;
    border-top:transparent;
    transform:rotate(45deg);
}

/**********************************************************************
		Sticky CTA Bar
**********************************************************************/
.sticky-bar-wrapper{
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
    z-index:100;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:16px 0;
    background-color:#fff;
    box-shadow:0 -2rem 1rem -2rem rgba(0,0,0,0.2);
}
.sticky-bar-wrapper .standard-btn{
    margin:0 auto;
}


/**********************************************************************
		Image Lightbox
**********************************************************************/
.fid-loader{
    position:fixed;
    z-index:1;
    left:45%;
    top:35%;
    width:100px;
    height: 100px;
    overflow:hidden;
    background-color:rgba(13,13,13,0.9);
    border-radius:10px;
    display:none;
}

.fid-loader .fid-spinner{
    border:4px solid #e0e0e0;
    border-top:4px solid #242424;
    border-radius:50%;
    width:40px;
    height:40px;
    margin:30px;
    animation:spin 2s linear infinite;
}

.fid-lightbox{
    position:fixed;
    z-index: 2;
    left:0;
    top:0;
    width:100%;
    height:100vh;
    overflow-y:hidden;
    background-color:rgba(0,0,0,0.3);
    display:none;
}

.fid-lightbox-container{
    margin-top:50px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.fid-lightbox-content{
    position:relative;
    padding:15px;
    padding-top:5px;
    background-color:rgba(13,13,13,0.9);
    border-radius:5px;
}

.fid-lightbox-content .fid-lightbox-close{
    position:absolute;
    right:10px;
    font-size:2em;
    color:#d4d4d4;
    cursor:pointer;
}

.fid-lightbox-img{
    margin-top:25px;
    max-width:100%;
    max-height:calc(100vh - 120px);
}

/* Keyframes */
@keyframes spin {
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}

@media(max-width:768px){
    .fid-lightbox-container{
        margin-top:5%;
    }
}