h1{
    width: 40%;
    font-weight: 600;
}
a{
    color: #E0382D !important;
}
strong{
    font-weight: bold !important;
}

.kanit {
    width: auto;
    font-family: 'Kanit';
    font-style: normal;
    font-weight: 400;
}
.open-sans {
    font-family: 'Open Sans';
    font-style: normal;
}
.montserrat{
    font-family: Montserrat;
    font-style: normal;
}
.security_code{
    font-family: 'Open Sans' !important;
    height: 44px !important;
}
.text-regular-size, .error-text-size{
    font-size: 20px !important;
}
.error-text-size{
    font-size: 20px;
}
.separator{
    font-size: 20px;
}
.width-text{
    width: 100% !important;
    line-height: 36px;
    text-align: justify;
}
.login-form-voipms{
    float: left;
    width: 35%;
    font-size: 24px;
}

.login-form-voipms .strength-bar-bootstrap-recoveries,
.login-form-voipms .msg
{
    font-size: 16px;
}

.md-form .toggle-bootstrap-recoveries {
    position: absolute;
    top: 15%;
    left: 89%;
    color: #808080;
    cursor: pointer;
}

.was-validated .row .col-12 .form-group .md-form .toggle-bootstrap-recoveries {
    left: 80%;
}

.main-left{
    background-image: url("../imgs/black-background-voipms.svg");
    background-size: cover;
    background-repeat: no-repeat;
    font-size: 22px;
    display: block;
    height: 100%;
    width: 65%;
    position:fixed;
    color: #FFFFFF;
    padding:0;
    margin:0;
    top:0;
    right:0;
    overflow-y: scroll;
}
.f-pass{
    font-size: 14px;
    font-weight: 700;
}
.btn:not(:disabled):not(.disabled), #resend_code {
    cursor: pointer;
}
.login-form .btn {
    height: 50px;
}
.login-form .btn {
    width: 100%;
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}
.btn-big, .btn-big-2 {
    min-width: 12em;
}
.btn-voip-red {
    color: #fff!important;
    background-color: #e1382d!important;
    border: 1px solid #e1382d!important;
}
.btn-big, .btn-big-2 {
    min-width: 12em;
}
.btn-voip-red {
    color: #fff!important;
    background-color: #e1382d!important;
    border: 1px solid #e1382d!important;
}
.btn {
    border-radius: 3px;
    font-family: Montserrat;
    font-style: normal;
    font-weight: 500;
    margin: 0;
    text-transform: none;
    font-size: .9em;
    padding: 8px 12px;
}
.btn {
    margin: 0 !important;
}
.join-us{
    font-size: 16px;
}
.right{
    float: right !important;
}
.show-message{
    display: block !important;
}
#reset-password{
    font-size: 16px;
}
#back-login, #back-login-email{
    cursor: pointer;
    color: #E1382D;
    font-size: 16px;
}
#code_form input {
    text-align: center;
    font-size: 32px;
    padding-right: 5px;
    padding-left: 5px;
    width: 10%;
    min-width: 30px;
}
#security_code_login_loading, #loading_security_code, #security-step, #login-btn-hidden, #error-messages, #reset-btn-hidden, .hide{
    display: none;
}
#error-messages{
    background-color: #F7CDCA;
    border-radius: 4px;
    text-align: left;
    padding: 15px;
    color: #E0382D !important;
    font-size: 14px !important;
    font-weight: 500;
}
#login-btn {
    border-radius: 3px;
    width: inherit !important;
}
#resetpass-btn{
    border-radius: 3px;
    width: inherit !important;
    display: none;
}
#setnewpass-btn{
    border-radius: 3px;
    width: inherit !important;
}
#forgotpass-initiate{
    cursor: pointer;
}
#go-back{
    top: 15px;
    float: left;
    font-size:15px;
}

/* SAMPLE CSS */

.md-form {
    background-color: #FFFFFF;
    border-radius: 4px;
}

.md-form.md-outline label {
    padding-top: 6px;
    font-weight: 500;
    font-style: normal;
    font-family: Montserrat;
    font-size: 16px;
    color: #A1A1A1;
}

.md-form.md-outline label.active {
    font-family: 'Montserrat';
    font-style: normal;
    background: transparent;
    font-size: 0.6em !important;
    padding-top: 12px !important;
}

.md-form.md-outline.input-with-post-icon input {
    padding-left: 1.9rem;
}

.md-form.md-outline.input-with-post-icon label,
.md-form.md-outline.input-with-post-icon label.active {
    padding-left: 1.8rem  !important;
}

.md-form.md-outline input {
    font-weight: 500;
}

.md-form.md-outline input[type=text],
.md-form.md-outline input[type=number],
.md-form.md-outline input[type=password] {
    border: none;
}

.md-form.md-outline:focus {
    outline: none;
    transition: none;
}

input:focus, .md-form.md-outline input:focus {
    transition: background-color .2s ease;
    border: 1px solid #BDBDBD !important;
    box-shadow: none !important;
}

.md-form.md-outline input:focus:not([readonly])+label {
    color: #BDBDBD !important;
}

.md-form.md-outline input {
    height: 50px !important;
    padding-bottom: 0px !important;
}

.md-form.md-outline label {
    background: transparent !important;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: auto;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder {
    color: #333333;
}

.bootstrap-select.btn-group .dropdown-toggle .caret:before,
.dropdown-toggle::after {
    border: 0 !important;
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    color: #BDBDBD;
}

.login-form .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.login-form .bootstrap-select.btn-group .dropdown-toggle .caret:before,
.dropdown-toggle::after {
    color: #E1382D;
}

.login-form .btn-light.dropdown-toggle,
.search-number-container .bootstrap-select.search-number-dropdown .btn-light.dropdown-toggle {
    background-color: #FFFFFF !important;
    font-size: 1em !important;
    padding-right: 2em;
    padding-left: 1.5em;
}

.search-number-container .bootstrap-select.search-number-dropdown .btn-light.dropdown-toggle {
    padding-right: 1.5em;
    width: 250px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.login-form .bootstrap-select .dropdown-toggle .filter-option {
    height: 24px;
}

.login-form .bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.login-form .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    color: inherit;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    color: #333333;
}

.dropdown.bootstrap-select.search-number-country {
    position: absolute;
    left: 10px;
    top: 10px;
}

.dropdown.bootstrap-select.search-number-country button {
    background-color: transparent !important;
    box-shadow: none;
}

.dropdown.bootstrap-select.search-number-country > .dropdown-toggle:after {
    color: #F2F2F2;
    margin-left: 9px;
}

.invalid-feedback {
    font-size: 48% !important;
}

.md-form .invalid-feedback, .select-feedback {
    font-family: Montserrat;
    font-weight: bold;
    margin-left: 0.2em;
    text-align: left;
}
.md-form .invalid-feedback {
    position: absolute;
    margin-top: -0.5em;
}

.select-feedback {
    margin-top: -0.6em;
}

.was-validated select:invalid~button~.invalid-feedback {
    display: block;
}

.md-form .form-control {
    margin-bottom: 1.2em;
}

.was-validated .form-control:invalid {
    background-image: url("../imgs/check-error.svg");
    background-position: right calc(1.3em + .1875rem) center;
}
.was-validated .form-control:valid {
    background-image: url("../imgs/check.svg");
    background-position: right calc(1.3em + .1875rem) center;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.was-validated .md-form.md-outline input:invalid,
.was-validated select:invalid~button {
    border: 1px solid #E1382D !important;
}

.bootstrap-select > .dropdown-toggle:after {
    -webkit-transition: -webkit-transform .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    margin-top: -1px;
}
.bs-searchbox, .bs-actionsbox, .bs-donebutton {
    padding: 15px 20px !important;
}
.bs-searchbox .form-control {
    background-image: url('../imgs/search.svg');
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-origin: content-box;
    text-indent: 33px;
    font-size: 15px;
    font-family: "Open Sans" !important;
    background-color: #F2F2F2 !important;
    border: none !important;
    height: 40px !important;
}
#select-div > .dropdown.bootstrap-select > button{
    background-color: #F2F2F2 !important;
    width: 347px !important;
    height: 57px !important;
}
#select-div > .dropdown.bootstrap-select > button > div > div > div > span{
    font-size: 24px;
    margin-left: 1rem !important;
}
#select-div > .dropdown.bootstrap-select > button > div > div > div > img{
    vertical-align: unset !important;
    width: 25.33px;
    height: 19px;
    margin-left: .2rem !important;
}
div#select-div > div > .dropdown-menu.show {
    display: block;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) !important;
}
.dropdown-header {
    padding: 0rem !important;
}
.bootstrap-select .dropdown-menu li a.opt {
    padding-left: 1.5em !important;
}

#main-title{
    font-size: 37px;
}

/* MEDIA QUERIES */

@media( max-width: 1200px ) {
    .main-left{
        width: 50% !important;
    }
    .login-form-voipms{
        width: 50%;
    }
    .width-text{
        width: 100%;
    }
    .text-small-alignment{
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media( max-width: 980px ){
    .main-left{
        width: 35% !important;
    }
    .login-form-voipms{
        width: 65% !important;
    }
    .width-text{
        width: 100%;
        font-size: 20px;
        line-height: 33px;
    }
    #main-title{
        font-size: 35px;
    }
}
@media( max-width: 880px ){
    .main-left{
        display: none !important;
    }
    .login-form-voipms{
        width: 100% !important;
    }
    .align-center-sm{
        text-align: center;
    }
    .hide-on-sm{
        display: none;
    }
}
@media screen and (max-width: 770px){
    #code_form input {
        font-size: 28px !important;
    }
}
@media( max-width: 575px ){
    .login-form-title{
        font-size: 16px !important;
    }
    .error-text-size{
        font-size: 16px !important;
    }
}
@media( max-width: 485px ){
    #code_form input{
        font-size: 26px !important;
        width: 12% !important;
    }
}
@media( max-width: 310px ){
    .img-logo-voipms{
        width: inherit;
    }
}