/* CSS Document */

body, html{
margin:0;
background-color:#C0C0FE;
font-family:"Times New Roman", Times, serif;
font-size:14px;
color:#000000;
width: 100%;
}

#page-container{
margin:auto;
width:88%;
}

.masthead{
width:713px;
height:162px;
background-image:url(../img/header.jpg);
background-repeat:no-repeat;
}

.masthead_l{
width:12px;
height:162px;
background-image:url(../img/header_l.jpg);
background-repeat:no-repeat;
}

.masthead_c{
height:162px;
background-image:url(../img/header_c.jpg);
background-repeat:repeat-x;
}

.masthead_r{
width:12px;
height:162px;
background-image:url(../img/header_r.jpg);
background-repeat:no-repeat;
}

.mastfoot_l{
width:12px;
height:20px;
background-image:url(../img/footer_l.jpg);
background-repeat:no-repeat;
margin-bottom:3px;
}

.mastfoot_c{
height:20px;
background-image:url(../img/footer_c.jpg);
background-repeat:repeat-x;
margin-bottom:3px;
}

.mastfoot_r{
width:12px;
height:20px;
background-image:url(../img/footer_r.jpg);
background-repeat:no-repeat;
margin-bottom:3px;
}

.mastbody_l{
width:12px;
background-image:url(../img/body_l.jpg);
background-repeat:repeat-y;

}

.mastbody_r{
width:12px;
background-image:url(../img/body_r.jpg);
background-repeat:repeat-y;
}

.mastbody_c{
background-image:url(../img/body_c.jpg);
background-repeat:repeat;
}

.mastmenu_l{
width:12px;
background-image:url(../img/menubar_l.jpg);
background-repeat:no-repeat;
}

.mastmenu_r{
width:12px;
background-image:url(../img/menubar_r.jpg);
background-repeat:no-repeat;
}

.mastmenu_c{
background-image:url(../img/menubar_c.jpg);
background-repeat:repeat-x;
}

#menu_bar{
background-image:url(../img/nav_bg.jpg);
background-repeat:no-repeat;
}

#footer{
width:713px;
height:20px;
background-image:url(../img/footer.jpg);
background-repeat:no-repeat;
margin-bottom:3px;
}

#copyright{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#039;
margin-bottom:8px;
}

.title_1{
font-family:"Times New Roman", Times, serif;
font-size:20px;
color:#000000;
font-weight:bold;
}

.title_2{
font-family:"Times New Roman", Times, serif;
font-size:18px;
color:#000000;
font-weight:bold;
}

.title_3{
font-family:"Times New Roman", Times, serif;
font-size:14px;
color:#000000;
font-weight:bold;
}

.title_4{
font-family:"Times New Roman", Times, serif;
font-size:11px;
color:#000000;
}

.login_1{
font-family:"Times New Roman", Times, serif;
font-size:13px;
color:#000000;
font-weight:bold;
}

.login_2{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#0000CC;
}

.agree_1{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#CC0033;
}

.side_1{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#000000;
}

.login_error{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color: #F00000;
}

/* MNS 2 */

.welcome{
font-family:"Times New Roman", Times, serif;
font-size:24px;
color:#0000ff;
font-weight:bold;
}

.nav_1{
font-family:Arial;
font-size:11px;
color:#ffffff;
font-weight:bold;
}

/* MNS 4 */

#content-2{
width:713px;
background-image:url(../img/middle_bg.jpg);
background-repeat:repeat-y;
}

.form_1{
font-family:"Times New Roman", Times, serif;
font-size:14px;
color:#5758ae;
font-weight:bold;
}

.form_2{
font-family:"Times New Roman", Times, serif;
font-size:14px;
color:#000;
text-decoration:none;
}

a.form_2:hover{
font-family:"Times New Roman", Times, serif;
font-size:14px;
color:#0000FF;
text-decoration:none;
}

a.form_2:visited{
font-family:"Times New Roman", Times, serif;
font-size:14px;
color:#000;
text-decoration:none;
}

/* MNS 5 */

.dropdown_1{
font-family:"Times New Roman", Times, serif;
font-size:14px;
color:#fff;
font-weight:bold;
text-decoration:none;
}

a.dropdown_1:hover{
font-family:"Times New Roman", Times, serif;
font-size:14px;
color:#fff;
font-weight:bold;
text-decoration:none;
}

a.dropdown_1:visited{
font-family:"Times New Roman", Times, serif;
font-size:14px;
color:#fff;
font-weight:bold;
text-decoration:none;
}

/* Nav - MNS 3 */

#sddm{
margin: 0;
padding: 0;
z-index: 30
}

#sddm li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px Arial;
line-height:11px;
}

#sddm li a{
display: block;
width: 150px;
margin-bottom:4px;
height: 19px;
/*background: #6991cf;*/
color: #FFF;
text-align: center;
text-decoration: none;
}

#sddm div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #6991cf;
border: 1px solid #5ba15b;
}

#sddm div a{
position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width:inherit;
text-align: left;
text-decoration: none;
background: #6991cf;
color: #fff;
font: 11px arial;
}

#sddm div a:hover{	
background: #bfbffe;
color: #36537d;
}

/* Nav - MNS 4 onwards */

#sddm_2{
margin: 0;
padding: 0;
z-index: 30;
width: 100%;
}

#sddm_2 li{
margin: 0;
padding: 0px 5px 0px 10px;
list-style: none;
float: left;
font: bold 11px Arial;
line-height:11px;
}

#sddm_2 li a{
display: block;
width: auto;
margin-bottom:4px;
height: 18px;
/*background: #6991cf;*/
color: #FFF;
text-align: center;
text-decoration: none;
}

#sddm_2 li span{
display: block;
width: auto;
margin-bottom:4px;
height: 18px;
/*background: #6991cf;*/
color: #FFF;
text-align: center;
text-decoration: none;
}

#sddm_2 div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #6991cf;
border: 1px solid #587eb7;  
}

#sddm_2 div a{
position: relative;
display: block;
margin: 0;
padding: 3px 10px;
width: inherit;
text-align: left;
text-decoration: none;
background: #6991cf;
color: #fff;
font: 11px arial;
}

#sddm_2 div a:hover{	
background: #bfbffe;
color: #36537d;
}

.textred{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:red;
}

.tablesetting
{
   BORDER-BOTTOM: 3px solid none;
   /*BORDER-LEFT: 3px solid #FFF;
   BORDER-RIGHT: 3px solid #FFF;*/
   padding-top : 10px;
   WIDTH: 100%;
   background-color: #ebebeb;
}

.cellcolor1 {
	background-color: #ebebeb;
}

.logoutbutt {
    background-image : url(../img/logout.jpg) !important;
    background-repeat : no-repeat  !important;
    background-position : center left !important;
    padding-left : 19px;

}

.tabContainer {
    background-color : #6771d3;

}

.tabOutline {
    border : 1px solid #6771d3;
    width : auto;
    overflow : auto;
}

.tabBody {
    background-color : #bfbffe;
}

.tabCell {
    background-color: rgb(106, 196, 108);
    color : rgb(255, 255, 255);
}

.UnhighlightedTab {
    background-color : #6771d3;
    color : #FFFFFF;
    padding: 3px 8px;
    border-top: 1px solid #6771d3;
    border-left: 1px solid #6771d3;
    border-right: 1px solid #6771d3;
    cursor: auto;


}

.HighlightedTab {
    background-color : #bfbffe;
    color : #000000;
    padding: 3px 8px;
    border-top: 1px solid #6771d3;
    border-left: 1px solid #6771d3;
    border-right: 1px solid #6771d3;
    cursor: pointer;
}


.button, #submitCompanies, #submitCompaniesFileNo {
    background-image:url('../img/button_bg1.jpg');
    background-color: #DDD;
    background-repeat: repeat-x;
    border:2px solid #AAA;
    border-radius: 4px;
    color:#333;
    cursor:pointer;
    font:bold 12px Arial;
    text-align:center;
    vertical-align: middle;
    height:26px;
    padding:3px 8px;
    transition:box-shadow .3s linear;
	-moz-transition:-moz-box-shadow .3s linear;
 	-webkit-transition:-webkit-box-shadow .3s linear;
}
.button:hover, button:focus{
	box-shadow:0px 0px 10px #C0C0FE;
	-moz-box-shadow:0px 0px 10px #C0C0FE;
	-webkit-box-shadow:0px 0px 10px #C0C0FE;   
}

.button[disabled] {
    background-image:url('../img/button_bg.jpg');
    background-color: #d5d5d5;
    background-repeat: repeat-x;
    border:2px solid #ccc9c9;
    color:#aaaaaa;
    font:bold 12px Arial;
    text-align:center;
    vertical-align: middle;
    height:26px;
    padding:3px 8px;
}

.MASTInputTextArea {
    font-family:"Times New Roman", Times, serif;
    font-size:14px;
}

.MASTInputText {
    font-family:"Times New Roman", Times, serif;
    font-size:14px;
}

.MASTInputNumeric {
    font-family:"Times New Roman", Times, serif;
    font-size:14px;
    text-align:right;
}

.MASTListBox {
    font-family:"Times New Roman", Times, serif;
    font-size:14px;
}

.MASTDownloadLink {
    text-decoration : none;
}

.readonly {
    background-color: #eeeeee;
    border : 1px solid #dddddd;
}

.GridDataCell,.GridCaptionTH {
    /*border: 1px solid #5ba15b;*/
}

.HighLiteViewFormSearch {
    color : white;
    background-color: #009900;
    cursor : pointer;
}

.UnHighLiteViewFormSearch {
    color : black;
    background-color: #ebebeb;
    cursor : pointer;
}

#ViewFormSearchList {
    border: 3px solid #FFFFFF;
   
}

.errmsg {
    color: rgb(240, 0, 0);
    font-family: 'Times New Roman', Times, serif;
    font-size: 10px;
}

.tabMask {
    background-color : #888888;
    bottom : 0;
    right : 0;
    position : absolute;
}

.mandatory {
    background-image: url(../img/asterisk.gif);
    background-repeat: no-repeat;
    background-position: 100% 50%;
}

.detail_1 {
    padding:2px 5px;
}



.tableBorder2012 {
	border-right: 1px solid #C0C0FE;
	border-top: 1px solid #C0C0FE;
	border-bottom: 1px solid #C0C0FE;
}

.tableBorder2012First {
	border-left: 1px solid #C0C0FE;
	border-right: 1px solid #C0C0FE;
	border-top: 1px solid #C0C0FE;
	border-bottom: 1px solid #C0C0FE;
}

.shadedTD {
	background-color : #DDD;
	border-left: 3px solid #FFF;
	padding-left: 10px;
}

.loginBanner {
	height:180px;
	background-image:url(../../img/cbris-banner.jpg);
	background-repeat: repeat-x;
	background-color : #CCC;
}

.headerBanner {
	height:109px;
	background:url(../../img/banner.jpg);
	background-repeat:no-repeat;
}

.headerBannerLogo {
	height:109px;
/*	background:url(../../img/mns-logo-72x65.png) right center;
	background-repeat:no-repeat;
	align: right;
	margin-right: 20px;*/
}

.announcementDiv {
	overflow: auto;
	height: 400px;
}

.helpdeskBox {
	margin-top: 10px;
	padding-top: 1px;
	padding-bottom: 12px;
	background-color: #FFF;
	border:3px solid #CCC;
}

.dashed-line {
	height:1px; 
	border-top:1px dashed black; 
	width:100%;
}




/*CBRIS REVAMP START*/
ul, p, a, div, span, blockquote, main, section, nav, header {
    padding: 0;
    margin: 0;
}
ul li {
     list-style-type: none;
}
ol li {
    list-style-type: auto;
    margin-left: 15px;
}

a {
    text-decoration: none;
}

.main {
    background-color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
}
.announcements table {
    border-width: 1px;
}

.announcements table td {
    border-width: 1px;
    padding: 5px;
}

/*RESET END*/


/*THEME VARIABLE START*/
:root {
    --primary: #104582; /*dark blue*/
    --secondary: #1879AC; /*light blue*/
    --tertiary: #585C61; /*dark text color*/
    --quaternary: #A7A7A7; /*light text + border color*/
    --quinary: #F4F8F3; /*input bg color*/
    --darken-primary: #0b3564;
    --darken-secondary: #0f4a69;
    --primary_rgb: 16, 69, 130;
}
/*THEME VARIABLE END*/

/*
.main a {
    list-style-type: none !important;
}
*/
/*TOPBAR START*/
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #FFFFFF;
    z-index: 11;
    height: 70px;
}
.top-bar .logo {
    width: 48px;
    height: 48px;
    background: url("../images/logo.png") no-repeat;
    background-size: cover;
    display: block;
}

.corporate h4 {
    font-size: 13px;
}
/*TOPBAR END*/

/*BANNER START*/
.banner {
    background: url("../images/banner.jpg") no-repeat;
    background-size: cover;
    margin-top: 70px;
    padding: 30px 60px;
    background-position: center;
}
@media screen and (min-width: 1200px) {
    .banner {
        padding: 50px 50px;
    }
}
@media screen and (min-width: 1400px) {
    .banner {
        padding: 90px 100px;
    }
}
@media screen and (min-width: 1500px) {
    .banner {
        padding: 90px 150px;
    }
}

.banner__announce {
    box-shadow: 0 4px 10px rgba(67, 67, 67, 0.3);
    border-radius: 8px;
    background-color: #ffffff;
    padding: 20px;
}
.banner__text {
   font-size: 15px;
   text-align: justify;
}

.banner__cta {
    display: flex;
    width: 100%
}
.banner__cta .cta{
    border-radius: 4px;
    width: 225px;
    background-color: white;
    padding: 10px;
    display: flex;
    align-items: center;
}
.banner__cta .cta:nth-child(2){
    margin: 0 1%;
}
.banner__cta .cta .cta__icon{
    width: 30px;
    height: 30px;
    background-color: var(--primary);
    font-size: 15px;
    border-radius: 30px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.banner__cta .cta .cta__content{
}
.banner__cta .cta .cta__content .title{
    color: #343A40;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    min-height: 30px;
    margin-bottom: 5px;
    line-height: 14px;
}
@media screen and (min-width: 1200px) {
    .banner__cta .cta .cta__content .title {
        font-size: 12px;
        line-height: 16px;
        min-height: 35px;
    }
}
@media screen and (min-width: 1400px) {
    .banner__cta .cta .cta__content .title {
        font-size: 14px;
    }
}
.banner__cta .cta--invert {
    background-color: var(--primary);
}
.banner__cta .cta--invert .cta__icon{
    background-color: white;
    color: var(--primary);
}
.banner__cta .cta--invert .cta__content .title{
    color: white;
}
.banner__cta .cta--invert .cta__content .action {
    color: var(--secondary);
}

.banner__announce__text {
    overflow: hidden;
}

/*BANNER END*/

/*LOGIN START*/
.login-container {
    background-color: #ffffff;
    width: 450px;
    box-shadow: 0px 4px 10px rgba(67, 67, 67, 0.3);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    padding: 35px;
    position: fixed;
    top:0; 
    transform: translateX(100%);
    height: 100vh;
    z-index: 10;
    transition: all ease-in-out 300ms;
    right: 0;
}

.login-container.show {
    transform: translateX(0);
}

.login-container .close {
    position: absolute;
    top: 10px;
    right: 35px;
    display: flex;
    align-items: center;
}
/*LOGIN END*/


/*HEADING START*/
h1 {
    font-size: 24px;
    color: var(--primary);
    font-weight: bold;
    line-height: 30px;
    margin-bottom: 15px;
}

h2 {
    font-size: 36px;
    color: var(--primary);
    font-weight: bold;
    line-height: 36px;
    margin-bottom: 15px;
}

h3 {
    font-size: 24px;
    color: var(--primary);
    font-weight: bold;
    line-height: 32px;
    margin-bottom: 15px;
}

h4 {
    font-size: 16px;
    color: var(--primary);
    font-weight: bold;
    line-height: 22px;
    margin-bottom: 15px;
}

h5 {
    font-size: 14px;
    color: var(--primary);
    font-weight: bold;
    line-height: 16px;
}

p {
    font-size: 12px;
    line-height: 20px;
    color: var(--tertiary);
    margin-bottom: 16px;
}
/*HEADING END*/


/*SECTION START*/
section {
    padding: 30px 60px;
}
@media screen and (min-width: 1200px) {
    section {
        padding: 25px 50px 35px;
    }
}
@media screen and (min-width: 1400px) {
    section {
        padding: 25px 100px 60px;
    }
}
@media screen and (min-width: 1500px) {
    section {
        padding: 25px 150px 60px;
    }
}

.announcements h2 {
    margin-bottom: 20px;
}
@media screen and (min-width: 1200px) {
    .announcements h2 {
        margin-bottom: 20px;
    }
}

.announcements .announcements-card {
    max-height: 200px;
    overflow-y: auto;
    height: 100%;
}
.announcements p {
    margin-bottom: 10px;
}
.announcements ul {
    margin-left: 20px;
}
.announcements ul li {
    list-style-type: none;
    font-size: 12px;
    line-height: 10px;
    color: var(--tertiary);
}
/*SECTION END*/

/*CARD START*/
.card {
    padding: 0 8px;
}

.card .card__wrapper {
    padding: 20px 16px;
    box-shadow: 0 2px 6px rgba(67, 67, 67, 0.1);
    border-radius: 8px;
    background: #FFFFFF;
}
/*CARD END*/

/*STEPS START*/
.steps-wrapper h3{
    margin-bottom: 30px;
}
@media screen and (min-width: 1200px) {
    .steps-wrapper h3 {
        margin-bottom: 60px;
    }
}
.steps {
    margin-bottom: 60px;
}
.step-wrapper {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
}
.step {
    width: 100%;
    padding: 12px;
    position: relative;
    transition: all ease-in-out 300ms;
    position: absolute;
    background-color: #FFFFFF;
}
.step.pos-top {
    bottom: initial;
    top: 10px;
}
.step.pos-bottom {
    bottom: 10px;
    top: initial;
}
.step .info {
    padding-left: 20px;
    display: flex;
    align-items: center;
    position: relative;
}
.step .label {
    transform: rotate(-90deg);
    color: #343A40;
    font-size: 14px;
    letter-spacing: 3px;
    line-height: 16px;
    position: absolute;
    left: -17px;
    height: 20px;
    font-weight: bold;
}
.step .count {
    font-size: 36px;
    color: var(--secondary);
    font-weight: bold;
    margin-right: 12px;
}
.step .title {
    color:#343A40;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
}
.step .cta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 11px;
   position: absolute;
   bottom: -10px;
   width: 96%;
   padding-right: 25px;
   right: -20px;
}
@media screen and (min-width: 1200px) {
    .step .cta {
        font-size: 12px;
    }
}
@media screen and (min-width: 1400px) {
    .step .cta {
        font-size: 14px;
    }
}
.step .hidden-content {
    width: 100%;
    height: 0;
    transition: all ease-in-out 300ms;
    overflow: hidden;
    visibility: hidden;
    font-size: 14px;
    line-height: 22px;
    color: var(--quaternary);
    padding: 0 12px;
}
.step.opac {
    opacity: 0.5;
}
.step.opac .action button {
    pointer-events: none;
}
.step.active {
    height: 200px;
    opacity: 1;
    z-index: 10;
    transition: all ease-in-out 300ms;
}
@media screen and (min-width: 1024px) {
    .step.active {
        height: 190px; 
    }
}
@media screen and (min-width: 1280px) {
    .step.active {
        height: 200px; 
    }
}
.step.active .cta {
    bottom: -10px;
}
.step.active .hidden-content {
    height: 100px;
    visibility: visible;
}
.cta .action button {
    transition: all ease-in-out 300ms;
    padding: 5px 16px;
    font-size: 13px;
}
.cta button:hover, .cta button:focus, .cta button:active {
    color: var(--primary)
}

/* SLIDER*/
.slider {
    overflow: hidden;
}
.slider.show-item-1 .slider-content {
    transform: translateX(0);
}
.slider.show-item-2 .slider-content {
    transform: translateX(-50%);
}
.slider .slider-content {
    display: flex;
    width: 200%;
    transition: all ease-in-out 300ms;
}
.slider .slider-content .slider-item {
    width: 100%;
    font-size: 12px;
}
.slider .slider-action-wrapper {
    position: absolute;
    height: 30px;
    width: 30px;
    bottom: 30px;
    right: 7px;
}
.slider .btn-slider {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease-in-out 300ms;
    border-radius: 4px;
    position: absolute
}
.slider .btn-slider span {
    color: var(--primary);
}
.slider .btn-slider:hover span, .slider .btn-slider:focus span, .slider .btn-slider:active span {
    color: var(--darken-primary);
}

.video-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    transition: all ease-in-out 300ms;
    visibility: hidden;
}
.video-wrapper .video {
    position: relative;;
    z-index: 2
}
.overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.7);
    position: absolute;
    top:0;
    left:0;
    z-index: 1;
}
.overlay .close {
    padding: 10px;
    position: absolute;
    top: 0;
    right: 30px;
    cursor: pointer;
}
.overlay .close span {
    font-size: 30px;
    color: #FFFFFF;
}
.video-wrapper.active {
    visibility: visible;
}

/*@media screen and (min-width: 1024px) {
    .video video {
        width: 50vw;
    }
}*/

/*STEPS END*/


/*FOOTER START*/
footer {
    padding: 30px 60px;
}
@media screen and (min-width: 1200px) {
    footer {
        padding: 50px 50px 35px;
    }
}
@media screen and (min-width: 1400px) {
    footer {
        padding: 75px 100px 60px;
    }
}

@media screen and (min-width: 1500px) {
    footer {
        padding: 25px 150px 25px;
    }
}

.footer-wrapper {}

.footer-logo {
    width: 174px;
    height: 73px;    
    background: url("https://cdn.jsdelivr.net/gh/mnsltd/mns-public@develop/logo-light.svg") center right/auto 40px no-repeat;    
    background-size: contain;
    display: block;
    margin-bottom: 10px;
}
/*FOOTER END*/

/*HELPERS START*/
    /*BG-COLOR START*/
.bg-primary {
    background-color: var(--primary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-tertiary {
    background-color: var(--tertiary);
}

.bg-quaternary {
    background-color: var(--quaternary);
}

.bg-quinary {
    background-color: var(--quinary);
}

.bg-primary-gradient {
    background: linear-gradient(88.18deg, #0E3767 0.2%, #072B55 29.7%, #052243 57.13%);
}

.bg-primary-gradient-image {
    background-image: url("../../images/mnsfront-building.jpg");
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.bg-primary-gradient-image:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(32, 119, 122, 0.7) 0.2%, rgba(15, 133, 137, 0.9) 75%);
}
    /*BG-COLOR END*/
    
    /*BUTTON START*/
button { 
    transition: all 300ms ease-in-out;
}
.btn {
    padding: 0 16px;
    font-size: 14px;
    border: 1px solid;
    border-radius: 20px;
    display: flex;
    align-items: center;
    font-weight: bold;
    height: 38px;
}

.btn--primary {
    color: #ffffff;
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.btn--primary .fa {
    color: white;
}
.btn--primary:hover, .btn--primary:focus, .btn--primary:active {
    color: #ffffff;
    background-color: var(--darken-secondary);
    border-color: var(--darken-secondary);
}
.btn--primary:hover .fa, .btn--primary:focus .fa, .btn--primary:active .fa {
    color: #ffffff;ss
}

.btn--secondary {
    color: #ffffff;
    background-color: var(--secondary);
    border-color: var(--secondary);
}

.btn--secondary:hover, .btn--secondary:focus, .btn--secondary:active {
    color: var(--secondary);
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}

.btn--tertiary {
    color: var(--primary);
    background-color: #ffffff;
    border-color: var(--primary);
}

.btn--tertiary .icon {
    color: var(--primary);
    border-color: var(--primary);
}

.btn--tertiary:hover, .btn--tertiary:focus, .btn--tertiary:active {
    color: #ffffff;
    background-color: var(--primary);
}

.btn--tertiary:hover .icon, .btn--tertiary:focus .icon, .btn--tertiary:active .icon {
    border-color: #FFFFFF;
    color: #ffffff;
}

.btn--tertiary.outline {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--primary);
}
.btn--tertiary.outline:hover, .btn--tertiary.outline:focus, .btn--tertiary.outline:active {
    color: #ffffff;
    background-color: var(--primary);
}

.btn--tertiary.outline:hover .icon-play--primary, .btn--tertiary.outline:focus .icon-play--primary, .btn--tertiary.outline:active .icon-play--primary {
    border-color: #FFFFFF;
}

.btn--quaternary {
    color: #ffffff;
    background-color: var(--secondary);
    border-color: var(--secondary);
}
.btn--quaternary .icon {
    color: #ffffff;
    border-color: #ffffff;
}
.btn--quaternary:hover, .btn--quaternary:focus, .btn--quaternary:active {
    color: #ffffff;
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn--quaternary:hover .icon, .btn--quaternary:focus .icon, .btn--quaternary:active .icon {
    color: #ffffff;
    border-color: #ffffff;
}

.icon-wrapper {
    padding: 10px;
}
.icon {
    width: 16px;
    height: 16px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: all ease-in-out 300ms;
}
.icon-play--primary {
    border: 1px solid var(--primary);
    color: var(--primary);
}

.icon-play--secondary {
    border: 1px solid var(--secondary);
    color: var(--secondary);
}
.icon-play--secondary:hover, .icon-play--secondary:focus, .icon-play--secondary:active {
    border: 1px solid var(--primary);
    background-color: var(--primary);
}
.icon-play--secondary:hover span, .icon-play--secondary:focus span, .icon-play--secondary:active span {
    color: #FFFFFF;
}
    /*BUTTON END*/
    
    /*Icon START*/
    .fa.fa-xs {
        font-size: 8px;
    }
    .fa.fa-sm {
        font-size: 10px;
    }
    .fa.fa-md {
        font-size: 12px;
    }
    .fa.fa-lg {
        font-size: 14px;
    }
    /*Icon END*/
    
    /*INPUT START*/
.input-wrapper {
    margin-bottom: 16px;
}

label {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 6px;
    display: block;
}

.main input {
    display: block;
    width: 100%;
    height: 38px;
    border-radius: 4px;
    border: 1px solid var(--quaternary);
    background-color: var(--quinary);
    transition: all ease-in-out 300ms;
    padding-left: 12px !important;
}

.main input::placeholder, textarea::placeholder {
    color: var(--quaternary);
    font-size: 14px;
    font-weight: normal;
}

.main input:focus, input:active, input:hover, input:focus-visible {
    border-color: var(--primary);
    outline: none;
}

.main input[type=checkbox]{
    height: 18px;
    width: 18px;
    cursor: pointer;
}
.main input[type="checkbox"]:checked:before {
      border-color: red !important;
    background-color:red !important;
}
.main textarea {
    display: block;
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--quaternary);
    background-color: var(--quinary);
    transition: all ease-in-out 300ms;
    padding: 12px !important;
}
    /*INPUT END*/
    
    /*LINK START*/
.link {
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    transition: all ease-in-out 300ms;
    text-decoration: none;
}

.link:hover .animate-right {
    transform: translateX(5px);
}

.link--primary {
    color: var(--primary);
}

.link--primary:hover, .link--primary:focus, .link--primary:active {
    color: var(--darken-primary);
}

.link--secondary {
    color: var(--secondary);
}

.link--secondary:hover, .link--secondary:focus, .link--secondary:active {
    color: var(--primary);
}

.link--tertiary {
    color: #FFFFFF;
}

.link--tertiary:hover, .link--tertiary:focus, .link--tertiary:active {
    color: var(--secondary);
}

.animate-right {
    transition: all ease-in-out 300ms;
}
    /*LINK END*/
    
    /*COLOR START*/
.text-primary-color {
    color: var(--primary);
}

.text-secondary-color {
    color: var(--secondary);
}

.text-tertiary-color {
    color: var(--tertiary);
}

.text-quaternary-color {
    color: var(--quaternary);
}

.text-white-color {
    color: #FFFFFF;
}
    /*COLOR END*/
    
.disabled {
    opacity: 0.7;
    pointer-events: none;
}
/*HELPERS END*/

/*COOKIES START*/
.gdprcookie {
    border-radius: 10px;
    padding: 24px;
    background: #104582;
    border-top-left: 2px solid #fff;    
    border-top-right: 2px solid #fff;

    position: fixed;
    z-index: 100;
    bottom: 2%;
    right: 2%;
    margin: auto;
    max-width: 30em;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    
}
.gdprcookie-intro {
    margin-right: 16px;
}
.gdprcookie h1,
.gdprcookie h2 {
    font-size: 18px;
    margin: 0 0 15px 0;
    color: #ffffff;
    font-family: Arial, sans-serif !important;
    line-height: 1.4;
}
.gdprcookie a {
    color: rgba(250,250,250,0.7);
    text-decoration: underline;
}
                     
.gdprcookie p {
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
}

.gdprcookie a:hover {
    text-decoration: underline;
}

.dgprcookie-close {
  position: absolute;
  right: 0;
  top: 0px;
  width: 30px;
  height: 30px;
}

.dgprcookie-close button {
    background: none;
    border: 0;
  opacity: 0.6;
  width: 30px;
  height: 30px;
  position: absolute;
  cursor: pointer;
  width: 100%;
}
.dgprcookie-close button:hover {
  opacity: 0.8;
}
.dgprcookie-close button:before, .dgprcookie-close button:after {
  position: absolute;
  left: 10px;
  top: 10px;
  content: ' ';
  height: 20px;
  width: 2px;
  background-color: #FFFFFF;
}
.dgprcookie-close button:before {
  transform: rotate(45deg);
}
.dgprcookie-close button:after {
  transform: rotate(-45deg);
}

.gdprcookie-buttons button, .gdprcookie-buttons-decline button {
    color: var(--primary);
    font-family: inherit;
    font-size: 15px;
    padding: .5rem 1rem;
    border-radius: .2rem;
    background: none;
    cursor: pointer;
    background: #FFFFFF;
    margin-top: 12px;
    transition: all 0.25s ease;
    width: 100%;
}

.gdprcookie-buttons-decline button {
    border-color: #455a64;
    background: #455a64;
        color:#FFFFFF;
}
.gdprcookie-buttons button:hover {
background: var(--secondary);
border-color: #FFFFFF;
color: #FFFFFF;
} 
.gdprcookie-buttons-decline button:hover {
background: #37474f;
border-color: #37474f;
} 
.gdprcookie-buttons button:disabled, .gdprcookie-buttons-decline button:disabled{
    color: rgba(255,255,255,.5);
}

/*CBRIS REVAMP END*/