html {
    height: 100%
}

body {
    height: 100%;
    margin: 0px;
    font-family: Gilroy-Regular !important;
}

@font-face {
    font-family: "Gilroy-Regular";
    font-style: normal;
    font-weight: normal;
    src: local("Gilroy-Regular"), url("../../../fonts/Gilroy-Regular.woff") format("woff");
}

@font-face {
    font-family: "Gilroy-Bold";
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    src: local("Gilroy-Bold"), url("../../../fonts/Gilroy-Bold.woff") format("woff");
}

@font-face {
    font-family: "Gilroy-Medium";
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    src: local("Gilroy-Medium"), url("../../../fonts/Gilroy-Medium.woff") format("woff");
}

@font-face {
    font-family: "Gilroy-Semibold";
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    src: local("Gilroy-Semibold"), url("../../../fonts/Gilroy-Semibold.woff") format("woff");
}

@font-face {
    font-family: "Gilroy-Light";
    font-style: normal;
    font-weight: normal;
    font-size: 14px;    
    src: local("Gilroy-Light"), url("../../../fonts/Gilroy-Light.woff") format("woff");
}

.gilroy-bold-text {
    font-family: "Gilroy-Bold";
}

.gilroy-semibold-text {
    font-family: "Gilroy-Semibold";
}

.gilroy-medium-text {
    font-family: "Gilroy-Medium";
}

.gilroy-light-text {
    font-family: "Gilroy-Light";
    color: #6C6D7A;
}

@media screen and (min-width: 0px) and (max-width: 768px) {
    .side-nav {
        display: none;
    }
}

@media screen and (min-width: 769px) {
    .side-nav {
        display: block;
    }
}

.form-control {
    border-color: #DADADA !important;
    color: #007DDE;
    font-family: Gilroy-Bold;
}

.form-control:focus {
    box-shadow: none;
    border-color: black !important;
    color: #007DDE;
}

.small-gray-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #c4c4c4;
}

.pl-10 {
    padding-left: 10px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-40 {
    padding-left: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.height-100 {
    height: 100%
}

.nav-item {
    height: 60px;
    margin-top: 15px;
    max-width: 240px;
    outline: none;
    display: flex;
    align-items: center;
}

.nav-item:hover {
    background: #c4c4c4;
}

.nav-item:hover > .small-gray-circle {
    background: #3a3b42 !important;
}

.arrow-back {
    font-size: 25px;
    color: black;
}

.external-login-btn {
    width: 195px;
    height: 73px;
    border: 1px solid #3A3B42;
    box-sizing: border-box;
    border-radius: 20px;
    display: flex;
    align-items: center;
}

.external-login-icon {
    width: 16px;
    height: 25px;
    background: rgba(196, 196, 196, 0.64);
    border-radius: 4px;
}

.vertical-center {
    display: flex;
    align-items: center;
}

.card {
    border: none;
}

.form-control {
    border: 2px solid #000000;
    box-sizing: border-box;
    border-radius: 8px;
    height: 100%;
    background: white;
}

.form-control:focus {
    border: 2px solid #000000;
    box-sizing: border-box;
    border-radius: 8px;
}

.input-group {
    height: 47px;
}

.input-group > .custom-select:not(:last-child), .input-group > .form-control:not(:last-child) {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.field-icon {
    float: right;
    margin-left: -22px;
    padding-right: 5px;
    margin-top: 15px;
    position: relative;
    z-index: 100;
}

.cc-btn {
    color: #ffffff !important;
}

.btn-primary {
    color: #ffffff !important;
}

#password-field {

}

a {
    color: #007DDE !important;
}

.checkbox-input {
    display: inline-flex;
    cursor: pointer;
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
}

.checkbox-input > span {
    padding-left: 10px;
    font-family: Gilroy-Semibold
}

.checkbox-input > input {
    height: 20px;
    width: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #3A3B42;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    cursor: pointer;
}

.checkbox-input > input:checked {
    border: 1px solid #007DDE;
    background-color: #007DDE;
}

.checkbox-input > input:checked + span::before {
    content: '\2713';
    color: white;
    position: absolute;
    left: 0.3rem;
    bottom: 0.1rem;
}

.button-large-black {
    height: 73px;
    background: #007DDE;
    border-radius: 20px;
    color: white;
    font-family: Gilroy-Semibold
}

.checkbox-img input,
.checkbox-warn input {
    display: none;
}

.checkbox-img span,
.checkbox-warn span {
    border: 1px solid #3A3B42;
    float: right;
    height: 20px;
    width: 20px;
    border-radius: 19px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-img:hover span,
.checkbox-img input:checked + span {
    width: 58px;
    height: 58px;
    background-color: #3A3B42;
}

.checkbox-img input:checked + span:before {
    content: "\2713";
    color: white;
}

.checkbox-warn:hover span,
.checkbox-warn input:checked + span {
    width: 58px;
    height: 58px;
    background-color: red;
}

.checkbox-warn input:checked + span:before {
    font-family: 'FontAwesome';
    content: "\f00d";
    color: white;
}