.studyMateForm {
    font-size: 1em;
    font-weight: 100;
}

.studyMateForm .row {
    margin: 5px auto;
}

.studyMateForm label {
    font-weight: 100 !important;
}

.studyMateForm .form-control {
    border-radius: 0 !important;
}

.studyMateForm .input-row {
    margin: 0 0 2px;
}

#passwordStrengthMeter {
    border: 1px solid #5d5d5d;
    display: none;
    height: 2em;
    padding: 0;
    text-align: center;
    margin-top: 0.4em;
}

.studyMateForm .infoBox_add {
    text-align: right;
    padding-top: 0.5em !important;
    padding-left: 0px;
    padding-right: 5px;

}

.studyMateForm .multiselect {
    height: 5em;
    font-size: inherit;
}

.studyMateForm .multiselect-long {
    height: 10em;
    font-size: inherit;
}

.studyMateForm input[type=text],
.studyMateForm input[type=password],
.studyMateForm input[type=file],
.studyMateForm select {
    width: 100%;
    padding: 3px 3px;
    margin: 5px 0;
    box-sizing: border-box;
    height: 2em;
}

.studyMateForm textarea{
    width: 100%;
}

.studyMateForm input[type=file] {
    line-height: 1.2rem;
}

.studyMateForm select[disabled]{
    opacity: 0.5;
    cursor: not-allowed;
}

.studyMateForm #btnDownloadID {
    width: auto;
    padding: 3px 5px;
    margin: 5px 0;
    box-sizing: border-box;
    height: 2em;
    text-overflow: clip;
}

input[type=text],
input[type=password],
textarea,
select {
    border: 1px solid var(--system-input-border-color);
    color: var(--system-text-color);
    background-color: var(--system-content-background-color);
}


.studyMateForm select[multiple] {
    height: auto;
}

.studyMateForm input[type=file] {
    border: 0;
    padding: 0;
}

.studyMateForm a {
    cursor: pointer;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=text]:hover,
input[type=password]:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover {
    border: 1px solid var(--system-input-border-hover-color);
}


.studyMateForm button,
.studyMateForm input[type=button],
.studyMateForm input[type=submit],
.studyMateForm input[type=reset],
.studyMateForm a.btn,
.div_content .panel-default .panel-footer input {
    padding: 5px 10px;
    box-sizing: border-box;
    border: 1px solid var(--system-content-button-color);
    color: var(--system-content-button-color);
    background-color: var(--system-content-background-color);
    border-radius: 0;
    font-size: 1em;
    -webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 3px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 3px 0px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 3px 0px;
}

.studyMateForm button:hover,
.studyMateForm input[type=button]:hover,
.studyMateForm input[type=submit]:hover,
.studyMateForm input[type=reset]:hover,
.studyMateForm a.btn:hover,
.div_content .panel-default .panel-footer input:hover,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
    color: var(--system-content-background-color);
    background-color: var(--system-content-button-color);
}


.studyMateForm .add-rem {
    margin-top: 0.3em !important;
    padding: 3px 5px !important;
}

.studyMateForm .view_menu {
    margin-top: 0.3em !important;
    padding: 0 !important;
}

.studyMateForm .add-rem:hover, .studyMateForm .view_menu:hover{
    text-decoration: none;
}
/* shuvo start*/
/* used in rate plan add for radio label*/
.studyMateForm .radio-label {
    font-weight: inherit;
    font-size: inherit;
}

.studyMateForm .radio-label:hover {
    cursor: pointer;
}

/* shuvo end*/
.studyMateForm .radio-holder, .studyMateForm .checkbox-holder {
    padding-top: 0.5em !important;
    min-height: 3.2em;
}

.generate-button {
    padding: 2px 5px !important;
    margin: 7px 0px !important;
}

.note-warning {
    padding: 5px 8px;
    margin: 10px 10px;
    color: #ff9012;
}

.green_text {
    color: #339933;
    font-style: italic;
    font-size: 0.8em;
}


.add-icon {
    background: url("../images/add-button.svg");
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.add-icon:hover {
    background: url("../images/add-button-hover.svg");
}

.remove-icon {
    background: url("../images/remove-button.svg");
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.remove-icon:hover {
    background: url("../images/remove-button-hover.svg");
}

.refresh-icon {
    background: url("../images/refresh.png") no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.add-rem-container, .view-menu-container, .info-text-container {
    padding-top: 0.6em;
}

.add-rem-container * {
    display: inline-block;
}

.add-rem-container *, .view-menu-container *, .info-text-container * {
    vertical-align: middle;

}

.studyMateForm .add-to-list, .studyMateForm .remove-from-list {
    height: 1.2em;
    width: 1.2em;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 0 !important;
}

.studyMateForm .add-to-list:hover, .studyMateForm .add-to-list:active,
.studyMateForm .remove-from-list:hover, .studyMateForm .remove-from-list:active {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

.studyMateForm .add-to-list {
    float: left;
    background-image: url("../images/add-to-list.svg");
}

.studyMateForm .remove-from-list {
    float: right;
    background-image: url("../images/remove-from-list.svg");
}

.studyMateForm .add-to-list:hover, .studyMateForm .add-to-list:active {
    background-image: url("../images/add-to-list-hover.svg");
}

.studyMateForm .remove-from-list:hover, .studyMateForm .remove-from-list:active {
    background-image: url("../images/remove-from-list-hover.svg");
}

/*-------------------------------------------*/
.studyMateForm .add-all-to-list {
    float: left;
    background-image: url("../images/add-all-to-list.svg");
}

.studyMateForm .remove-all-from-list {
    float: right;
    background-image: url("../images/remove-all-from-list.svg");
}

.studyMateForm .add-all-to-list:hover, .studyMateForm .add-all-to-list:active {
    background-image: url("../images/add-all-to-list-hover.svg");
    background-color: transparent !important;
    background-repeat: no-repeat;
}

.studyMateForm .remove-all-from-list:hover, .studyMateForm .remove-all-from-list:active {
    background-image: url("../images/remove-all-from-list-hover.svg");
    background-color: transparent !important;
    background-repeat: no-repeat;
}

/*-------------------------------------------*/

/*-----------------add ALL and Remove All--------------------------*/
.studyMateForm .add-all-to-list, .studyMateForm .remove-all-from-list {
    height: 1.2em;
    width: 1.2em;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 0 !important;
}

.studyMateForm .add-all-to-list {
    float: left;
    background-image: url("../images/add-all-to-list.svg");
}

.studyMateForm .remove-all-from-list {
    float: right;
    background-image: url("../images/remove-all-from-list.svg");
}

.studyMateForm .add-all-to-list:hover, .studyMateForm .add-all-to-list:active,
.studyMateForm .remove-all-from-list:hover, .studyMateForm .remove-all-from-list:active {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background: transparent;
    background-size: 100% 100% !important;
}

.studyMateForm .add-all-to-list:hover, .studyMateForm .add-all-to-list:active {
    background-image: url("../images/add-all-to-list-hover.svg");
}

.studyMateForm .remove-all-from-list:hover, .studyMateForm .remove-all-from-list:active {
    background-image: url("../images/remove-all-from-list-hover.svg");
}

/*-------------------------------------------*/

.cl-add-rem-holder {
    margin-top: 25%;
    margin-bottom: 25%;
}

.studyMateForm .multi-list-header {
    text-align: center;
}

/*-------------------Custom Radio and Check-box--start------------------------*/

.check-container {
    display: inline-block;
    position: relative;
    padding-left: 1.3em;
    margin-bottom: 0.2em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.check-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.check-container .checkmark {
    position: absolute;
    top: 0.24em;
    left: 0;
    height: 1.15em;
    width: 1.15em;
    background-color: var(--system-content-background-color);
    border: 0.08em solid #a2a2a2;
}


/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {
    border-color: #2c79be;
}

/* When the checkbox is checked, add a blue background */
.check-container input:checked ~ .checkmark {
    /*background-color: #FFF;*/
    border-color: #2c79be;
}

.check-container input:focus ~ .checkmark {
    border-color: #2c79be;
}

/* Create the checkmark/indicator (hidden when not checked) */
.check-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
    left: 0.3em;
    top: 0.08em;
    width: 0.3em;
    height: 0.65em;
    border: solid #7a9dd6;
    border-width: 0 0.08em 0.08em 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.check-container input:disabled ~ .checkmark {
    /*background-color: #FFF;*/
    border-color: #a2a2a2;
}

.check-container input:disabled ~ .checkmark::after {
    border: solid #a2a2a2;
    border-width: 0 0.08em 0.08em 0;
}

.check-container:hover input:disabled ~ .checkmark {
    border-color: #a2a2a2;
}

.radio-container {
    display: inline-block;
    position: relative;
    padding-left: 22px;
    padding-right: 2px;
    padding-top: 0px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
    position: absolute;
    opacity: 0 !important;
    cursor: pointer;
}

/* Create a custom radio button */
.radio-container .checkmark {
    position: absolute;
    top: 0.2em;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: var(--system-content-background-color);
    border-radius: 50%;
    border: 0.15em solid #a2a2a2;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .checkmark {
    border-color: #679ed0;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
    /*background-color: #FFF;*/
    border-color: #679ed0;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .checkmark:after {
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #386cc2;
}

.radio-container input:checked ~ .checkmark {
    /*background-color: #FFF;*/
    border-color: #a2a2a2;
    font-size: 0.5em;
}

.radio-container input:disabled ~ .checkmark::after {
    background: #a2a2a2;
}

.radio-container:hover input:disabled ~ .checkmark {
    border-color: #a2a2a2;
}

.studyMateForm .disabled{
    opacity: 0.5;
}

.studyMateForm .hidden{
    max-height: 0;
    display: none;
}
.studyMateForm .row{
    transition: all .1s ease;
}

/*-------------------Custom Radio and Check-box--end------------------------*/

@media ( max-width: 1580px) {
    .radio-container .checkmark {
        height: 16px;
        width: 16px;
    }

    .radio-container .checkmark:after {
        top: 3px;
        left: 3px;
        width: 8px;
        height: 8px;
    }
}

@media only screen and (max-width: 1200px) {
    .studyMateForm input[type=text], .studyMateForm input[type=file], .studyMateForm select, .studyMateForm #btnDownloadID {
        height: 2em;
    }

}

@media only screen and (max-width: 991px) {
    .studyMateForm .infoBox_add {
        text-align: left;
    }

    .studyMateForm input[type=text], .studyMateForm input[type=file], .studyMateForm select, .studyMateForm #btnDownloadID {
        height: 2.2em;
    }

    .radio-container {
        padding-top: 0;
        padding-left: 18px;
    }

    .radio-container .checkmark {
        top: 0.2em;
        left: 0;
        height: 12px;
        width: 12px;
    }

    .radio-container .checkmark:after {
        top: 2px;
        left: 2px;
        width: 6px;
        height: 6px;
    }

}

/* Extra Small Devices, .visible-xs-* */
@media only screen and (max-width: 767px) {
    .studyMateForm input[type=text], .studyMateForm input[type=file], .studyMateForm select, .studyMateForm #btnDownloadID {
        height: 2.5em;
    }

    .cl-add-rem-holder {
        margin-top: 0%;
        margin-bottom: 3%;
    }

    .studyMateForm .add-to-list {
        background-image: url("../images/add-to-list-mob.svg");
    }

    .studyMateForm .remove-from-list {
        background-image: url("../images/remove-from-list-mob.svg");
    }

    .studyMateForm .add-to-list:hover, .studyMateForm .add-to-list:active {
        background-image: url("../images/add-to-list-mob-hover.svg");
    }

    .studyMateForm .remove-from-list:hover, .studyMateForm .remove-from-list:active {
        background-image: url("../images/remove-from-list-mob-hover.svg");
    }

    .studyMateForm .add-all-to-list {
        background-image: url("../images/add-all-to-list-mob.svg");
    }

    .studyMateForm .remove-all-from-list {
        background-image: url("../images/remove-all-from-list-mob.svg");
    }

    .studyMateForm .add-all-to-list:hover, .studyMateForm .add-all-to-list:active {
        background-image: url("../images/add-all-to-list-mob-hover.svg");
    }

    .studyMateForm .remove-all-from-list:hover, .studyMateForm .remove-all-from-list:active {
        background-image: url("../images/remove-all-from-list-mob-hover.svg");
    }

    .studyMateForm .multi-list-header {
        text-align: left;
    }

    .radio-container {
        padding-left: 16px;
        padding-top: 2px;
    }

}

/* Small Devices, .visible-sm-* */
@media only screen and (max-width: 480px) {

}

button[disabled], html input[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.studyMateForm input[readonly]{
    opacity: 0.9;
    cursor: not-allowed;
}