﻿/* REGULAR Dropdowns for Home pages and Account pages*/
.control-dropdown-wrapper { overflow: hidden; position: relative; display: block; z-index: 100; }
.control-dropdown-wrapper:after { right: 35px; border: solid transparent; content: "\F140"; font-family: "Material Design Icons"; height: 0; width: 0; position: absolute; pointer-events: none; z-index: 100; }
.control-dropdown-wrapper .control-dropdown-inner { background-color: #FFF; padding: 6px 12px; height: 40px; overflow: hidden; position: relative; width: 102%; font-size: 16px; line-height: 18px; font-weight: 400; }
.control-dropdown-wrapper .control-dropdown-inner span { line-height: 20px; font-family: 'Roboto Regular', sans-serif; font-size: 14px; overflow: hidden; word-wrap: normal; height: 44px; display: inline-block; padding: 12px 0; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.control-dropdown-wrapper select.form-control { border: none; margin: 0; opacity: 0; filter: alpha(opacity=0); position: absolute; top: 0; left: 0; width: 98%; border-radius: 0; padding: 4px 12px 4px 12px; z-index: 109; display: block; }
.control-dropdown-wrapper select.form-control option { color: #2C6680; white-space: normal; word-wrap: normal; line-height: 30px; font-family: 'Roboto Regular', sans-serif; font-size: 14px; font-weight: 400; }
.control-dropdown-wrapper select.form-control.activity option { text-align: center; font-size: 14px;}

.control-dropdown-wrapper select.form-control:focus { outline: none; border-color: none; box-shadow: none; }
.control-dropdown-wrapper.focused { border: 2px solid #2C6680; }

.form-group.has-error .control-dropdown-wrapper, .form-group.has-error .control-dropdown-wrapper:focus { border-color: #C10A0A; box-shadow: none; }
.dropdown-wrapper.has-error .control-dropdown-wrapper { border-color: #C10A0A; box-shadow: none; }


.control-dropdown-wrapper { height: 40px; border-radius: 0; border: 2px solid #DEDEDD; color: #556573; }
/*.control-dropdown-wrapper.focused { border: 2px solid #556573; }*/
.control-dropdown-wrapper:after { top: -20%; font-size: 30px; color: #2C6680; }
.control-dropdown-wrapper .control-dropdown-inner span { padding: 1px 0; width: 90%; }
.control-dropdown-wrapper select.form-control { height: 40px; }

@media (min-width: 768px) {
    .control-dropdown-wrapper .control-dropdown-inner {font-size: 18px; line-height: 20px; }
    .control-dropdown-wrapper .control-dropdown-inner span { line-height: 22px;  font-size: 16px; }
    .control-dropdown-wrapper select.form-control option {  font-size: 16px;  }
    .control-dropdown-wrapper select.form-control.activity option { font-size: 16px;}
}

/*Checkboxes*/
.control-checkbox-wrapper { margin-right: 35px; float: left; height: 18px; }
.control-checkbox-wrapper .control-checkbox-inner { cursor: pointer; position: absolute; width: 18px; height: 18px; /*top: 0;*/ border: 1px solid #3B799E; border-radius: 0; background-color: #FFF;}
.control-checkbox-inner input[type='checkbox'] { opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.control-checkbox-wrapper .control-checkbox-inner.checked { border: 2px solid #3B799E; }
.control-checkbox-wrapper .control-checkbox-inner.checked:before { position: absolute; content: '\F132'; font-family: "Material Design Icons"; font-size: 22px; color: #3B799E; top: -10px; left: -4px; }
.control-checkbox-wrapper .control-checkbox-inner.focused { }
.control-checkbox-wrapper .control-checkbox-inner.disabled { opacity: 0.4; cursor: default;  }

.has-error .control-checkbox-wrapper .control-checkbox-inner { border: 1px solid #C10A0A; }
.control-checkbox-wrapper.with-input { margin-top: 10px; }
/*Radio buttons*/
.control-radio-wrapper { /*margin-right: 30px;*/ }
.control-radio-wrapper .control-radio-inner { cursor: pointer; }
.control-radio-wrapper .control-radio-inner input[type='radio'] { opacity: 0; cursor: pointer; margin-top: 7px; }
.control-radio-wrapper .control-radio-inner.disabled { opacity: 0.4; cursor: default;  }
.control-radio-wrapper .control-radio-inner.disabled input[type='radio'] { /*cursor: not-allowed;*/ }

.control-radio-wrapper .control-radio-inner:before { content: ''; position: absolute; left: 0; top: 10px; width: 20px; height: 20px; border: 2px solid #2C6680; border-radius: 100%; background-color: #FFF; }
.control-radio-wrapper .control-radio-inner:after { opacity: 0; content: ''; width: 12px; height: 12px; background: #2C6680; position: absolute; left: 4px; top: 14px; border-radius: 100%; -webkit-transition: all 0.2s; transition: all 0.2s; transform: scale(0); }
#radiodiv  .control-radio-wrapper { position: relative; }
#radiodiv .control-radio-wrapper .control-radio-inner:before { left: 29px; top: 1px; }
#radiodiv .control-radio-wrapper .control-radio-inner input[type='radio'] { margin-top: 5px;  }
#radiodiv  .control-radio-wrapper .control-radio-inner:after { left: 33px; top: 5px; }

.control-radio-wrapper .control-radio-inner.checked:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }

.secure-image .control-radio-wrapper .control-radio-inner {  position: relative; }
.secure-image .control-radio-wrapper .control-radio-inner:before { left: 29px; top: 3px;  }
.secure-image .control-radio-wrapper .control-radio-inner:after { left: 33px; top: 7px; }


/*Checkbox for freeze-unfreeze option*/
.light-switch .control-checkbox-wrapper { margin-right: 45px; float: left; height: 42px; }
.light-switch .control-checkbox-wrapper .control-checkbox-inner { cursor: pointer; position: absolute; width: 88px; height: 42px; top: -3px; left: 15px; border: 1px solid #87878A; border-radius: 21px; }
.light-switch .control-checkbox-wrapper .control-checkbox-inner:before { content: ''; width: 34px; height: 34px; background: #A9AdB0; position: absolute; top: 3px; left: 3px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: 2px 0px 6px rgba(0,0,0,0.1); -moz-box-shadow: 2px 0px 6px rgba(0,0,0,0.1); -webkit-box-shadow: 2px 0px 6px rgba(0,0,0,0.1); -o-box-shadow: 2px 0px 6px rgba(0,0,0,0.1); }
.light-switch .control-checkbox-wrapper .control-checkbox-inner.checked:before { content: ''; width: 34px; height: 34px; background: #27BCA8; position: absolute; top: 3px; left: 49px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; box-shadow: -3px 0px 6px rgba(0,0,0,0.1); -moz-box-shadow: -3px 0px 6px rgba(0,0,0,0.1); -webkit-box-shadow: -3px 0px 6px rgba(0,0,0,0.1); -o-box-shadow: -3px 0px 6px rgba(0,0,0,0.1); }
.light-switch span { font-size: 9px; letter-spacing: 1px; color: #87878A; }
.light-switch span:first-child { margin-right: 32px; }
.light-switch .on-off-text { position: absolute; top: -25px; left: 24px; }


.cwsCreditCardMask { display: block; }
.cwsCreditCardMask input {  padding-left: 5px; }
#SavedCardsList { width: 100%;  }
#SavedCardsList .control-dropdown-wrapper { width: auto; min-width: 230px; }
.ddlCardType .control-dropdown-wrapper { width: auto; min-width: 230px; }
.cwsCreditCardMask .card-number { width: auto; min-width: 230px; }

@media (min-width: 768px) {
    #SavedCardsList .control-dropdown-wrapper { width: 300px; }
    .ddlCardType .control-dropdown-wrapper { width: 300px; }
    .cwsCreditCardMask .card-number { width: 300px; }
}
.cwsCreditCardMask input.form-control.card-input-displayed { border-right: 0; }
    .cwsCreditCardMask .btn.btn-light { height: 40px; width: 40px; min-width: 0; margin-top: 0; background-color: #FFF; color: #2C6680; border: 2px solid #DEDEDD; border-left: 0; padding: 5px 10px 5px 10px; box-shadow: none; }
.has-error .btn.btn-light { border-color: #C10A0A; }