/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v15-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Poppins Regular'), local('Poppins-Regular'),
        url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/poppins-v15-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/poppins-v15-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/poppins-v15-latin-regular.svg#Poppins') format('svg');
    /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v20-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
        url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/roboto-v20-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg');
    /* Legacy iOS */
}

.bg-primary {
    background-color: #333333 !important;
}

.bg-secondary {
    background-color: #28A8E0 !important;
}

.custom-select {
    background-color: #474747;
    border-radius: 2px;
    border-width: 0px;
    color: white;
}

h1 {
    font-family: 'Poppins';
    color: white;
}

h5 {
    font-family: 'Poppins';
    color: white;
}

label {
    font-family: 'Poppins';
    color: white;
}

button {
    font-family: 'Roboto';
}

th {
    font-family: 'Poppins';
}

a {
    font-family: 'Poppins';
}

div.card {
    background-color: #333333;
    border-radius: 8px;
    border-width: 0px;
}

body {
    background-color: #272727;
}

.form-group .form-control {
    background-color: #474747;
    color: white;
    border-radius: 2px;
    border-width: 0px;
}

.form-control:disabled {
    opacity: 0.45;
}

.btn-primary {
    background-color: #242424;
    background-image: none;
    border-width: 0px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #474747 inset !important;
    border-radius: 2px !important;
    border-width: 0px !important;
}

input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
}

.form-control::-webkit-input-placeholder {
    color: #cccccc;
    opacity: 1;
}

.form-control::-moz-placeholder {
    color: #cccccc;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: #cccccc;
    opacity: 1;
}

.form-control::-ms-input-placeholder {
    color: #cccccc;
    opacity: 1;
}

.form-control::placeholder {
    color: #cccccc;
    opacity: 1;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #272727;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #333333;
}

.alert {
    margin-bottom: 0.5rem;
}

.caret {
    color: white;
}

.customerInfoDiv {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.flexBoxSpaceBetween {
    display: flex;
    justify-content: space-between;
}

#customerInfoDivMain {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.flex {
    display: flex;
}

/* in the html in generateKeys there are divs that are only there to provide more space to its children */
.customerInfoSpacer {
    max-width: 24%;
    flex: 1;
}

.form-group.med {
    max-width: 24.53rem;
    flex: 1;
}

.form-group.smol {
    max-width: 11.84167rem;
    flex: 1;
}

.generateKeysHeader {
    margin-bottom: 1.25rem;
}

.mainCard {
    margin: 1.25em;
}

.pluginCard {
    margin-bottom: 0px;
    margin-top: 0px;
    width: 100%;
}

.pluginInfoDiv {
    margin-bottom: 1.25rem;
}

.blueAsterisk {
    color: #28A8E0;
    margin-bottom: 0px;
    margin-left: 0.25rem;
}

.pluginCardRadio {
    margin-top: 1.25rem;
}

#pluginCardRadioLeft {
    flex-grow: 2;
    margin-left: 1.25rem;
}

.pluginListRow {
    background-color: #272727;
}

#pluginName {
    width: 25rem;
}

#licenseType {
    width: 6rem;
}

#lockingID {
    width: 20rem;
}

#backupID {
    width: 20rem;
}

#expires {
    width: 4rem;
}

#expirationDate {
    width: 13rem;
}

#quantity {
    width: 4rem;
}

.generateKeysCopyToClipboardButton {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0px;
    margin-left: 0.5rem;
    background-color: #00AEED;
    color: black;
    text-shadow: none;
    font-weight: bold;
}

#generateKeysSubmitButton {
    margin: 1.25rem;
    background-color: #28A8E0;
    color: black;
    text-shadow: none;
    font-weight: bold;
}

.orderFormDiv {
    margin-bottom: 0px;
}

#orderFormDeleteBtn {
    width: 50%;
    border-width: 0px;
}

#delete {
    width: 8rem;
}

#submit {
    width: 8rem;
}

#update {
    width: 8rem;
}

#successModal {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#successModalDialogue {
    display: inline-block;
    max-width: 100%;
    width: auto !important;
}

.modal-content {
    background-color: #333333;
}

.managePluginsRow {
    display: flex;
    flex-direction: row;
    padding: .5rem;
}

#pluginLogo {
    flex-direction: column;
}

.managePluginsCard {
    padding: .5rem;
}

@media only screen and (max-width: 780px) {
    #customerInfoDivMain {
        display: block;
    }

    .customerInfoSpacer {
        max-width: 100%;
    }

    .pluginCard {
        display: block;
        width: 100%;
    }

    .pluginCard input,
    .pluginCard select,
    .pluginCard .form-control {
        min-width: 150px;
        width: 100%;
        box-sizing: border-box;
    }

    .pluginCard .table-responsive {
        overflow-x: auto;
    }

    .pluginCard th,
    .pluginCard td {
        white-space: nowrap;
    }
}


.form-group {
    width: 100%;
}