:root {
    --purchase-btn-grad: linear-gradient(45deg, #BEC0C2, #B3B6B5, #A1A2A3, #8E8D8D, #7D7D7A, #70706F);
    --purchase-btn-starting-color: white;
    --purchase-btn-ending-color: rgb(94, 94, 94);
}

html.dark #header .header-body {
    background-color: #1D2D44 !important;
}

.custom-react-hover-effect,
.custom-workers-hover-effect,
.custom-expo-hover-effect,
.custom-mongo-hover-effect {
    transition: ease background 300ms;
}

.custom-mongo-hover-effect {
    transition-property: all;
}

.custom-react-hover-effect:hover {
    background: #23272f;
}

.custom-workers-hover-effect:hover {
    background: #1d1d1d;
}

.custom-expo-hover-effect:hover {
    background: #151718;
}

.custom-mongo-hover-effect:hover {
    background: #00ed64;
}

.custom-mongo-hover-effect:hover img {
    filter: none !important;
}

.btn-primary {
    background-color: #78d693 !important;
    border-color: #78d693 #78d693 #63b67a !important;
    color: #1D2D44 !important;
    transition-duration: 200ms, 200ms, 200ms, 200ms !important;
}

.btn-primary:hover {
    background-color: #1D2D44 !important;
    border-color: #1D2D44 #1D2D44 #172f50 !important;
    color: #78d693 !important;
}

html body .btn-primary:active {
    background-color: #13253d !important;
    border-color: #1D2D44 #1D2D44 #172f50 !important;
    color: #78d693 !important;
}

.formView {
    /*display: grid;
    grid-template-columns: auto auto;
    column-gap: calc(100vw - 1000px);*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.form * {
    color: white;
}

.subheader {
    margin-left: -20px;
}

.checkBox,
.textInput,
.selectInput,
.imgInput {
    font-weight: bold;
    display: block;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin-bottom: 25px;
}

.checkBox {
    margin-left: 40px;
}

.checkBox input {
    height: 0;
    width: 0;
}


.checkBox .checkmark {
    position: absolute;
    top: -2px;
    left: -40px;
    height: 30px;
    width: 30px;
    border: 2px solid #00000000;
    border-radius: 20%;
    background-color: #525252;
    transition: all 200ms ease;
    cursor: pointer;
}

.checkBox:hover input~.checkmark {
    background-color: #5f5f5f;
}

.checkmark i {
    font-size: 25px;
    opacity: 0;
    transition: all 200ms ease;
}

.checkBox input:checked~.checkmark i {
    opacity: 1;
}

.checkBox input:checked~.checkmark {
    background-color: #78d693;
}

.textInput input, .selectInput select, .imgInput input {
    background-color: #525252;
    border: none;
    outline: none;
    border-radius: 5px;
    transition: all 200ms ease;
    padding: 5px;
    min-width: 400px;
}

.textInput input:hover, .selectInput select:hover, .imgInput input:hover {
    background-color: #5f5f5f;
}

.textInput input:focus, .selectInput select:focus, .imgInput input:focus {
    border: 2px solid #919191;
}

.selectInput select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(120, 214, 147)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-color: #525252;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 5px;
}

.selectInput::-ms-expand {
    display: none;
}

.selectInput select:focus {
    background-image: url("data:image/svg+xml;utf8,<svg fill='rgb(120, 214, 147)' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z' transform='rotate(180, 12, 12)'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
}

.imgInput input {
    display: none;
}

.sideButtonInput {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.sideButton {
    background-color: #1D2D44;
    padding: 11px;
    margin-left: -4px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    transition: all 300ms ease;
}

.sideButton:hover {
    background-color: #78d693;
}

.price {
    display: inline;
    color: rgba(255, 255, 255, 0.75);
    margin-left: 20px;
}

#planSubmission, #loginSubmission, #saveBtn, #signupSubmission {
    border: none;
    min-width: 150px;
    min-height: 50px;
    font-weight: bold;
    font-size: 20px;
    padding: 5px;
    border-radius: 50px;
    transition: all 300ms ease;
    background: #70706F;
}

#planSubmission {
    background: var(--purchase-btn-grad);
    background-size: 400%;
    animation: gradMove 3s ease infinite;
}

#planSubmission:hover, #loginSubmission:hover, #saveBtn:hover {
    transform: scale(1.1);
}

.problem {
    color: #f03c3c;
}

.planCard {
    background-image: var(--purchase-btn-grad);
    background-size: 400%;
    animation: gradMove 3s ease infinite;
    padding: 20px;
    padding-bottom: 40px;
    min-width: 400px;
    border-radius: 45px;
    height: max-content;
    margin-top: 25px;
    transition: all 300ms ease;
}

.planCard:hover {
    transform: scale(1.05);
}

.planCard *:not(i) {
    font-family: Inter,sans-serif;
}

.planCard #cardTitle {
    text-align: center;
    font-weight: bold;
}

.planCard #features {
    list-style-type: none;
    font-size: 20px;
}

.planCard #features li {
    padding-bottom: 10px;
}

.planCard #financials {
    display: grid;
    grid-template-rows: auto auto;
    margin-top: 100px;
    row-gap: 20%;
}

.planCard #financials div {
    display: grid;
    grid-template-columns: auto auto;
}

.planCard #financials div h1 {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    text-align: right;
}

.planCard #financials div p {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    animation: gradMove 3s linear infinite;
}

.embeddedTxt {
    color: #58A4B0;
}

.embeddedTxt::selection {
    color: #d3d3d3;
}

#deadline {
    background-color: #172f50;
    padding: 40px;
    width: 75%;
    border-radius: 15px;
    margin-bottom: 20px;
    background-image: radial-gradient(ellipse, #78d6934d, transparent 90%);
    animation-duration: 2s;
}

#deadline span {
    display: block;
    transform: translateY(50%);
}

#deadline h4 {
    display: block;
    transform: translateY(20px);
}

#deadline span {
    font-weight: bold;
}

.mawjood {
    color: #1D2D44;
    text-shadow: 0px 0px 5px #78d693;
    font-weight: bold;
}

li .mawjood {
    color: #d3d3d3;
}

.mawjood::selection {
    color: #78d693 !important;
    text-shadow: 0px 5px 5px #1D2D44 !important;
}

.available {
    position: absolute;
    right: 0;
    margin-right: 20px;
    background-color: #78d693;
    padding: 5px;
    border-radius: 100%;
    width: 30px !important;
    height: 30px !important;
    text-align: center;
    top: 0;
    margin-top: -8px;
    opacity: 0;
    transition: all 200ms ease;
}

#planTemplateSelector {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 40px;
    margin-top: 7%;
}

.optionCard {
    background-color: #1D2D44;
    padding: 30px;
    text-align: center;
    border-radius: 25px;
    width: 250px;
    color: white;
    font-weight: bold;
    transition: all 300ms ease;
    font-family: 'Courier New', Courier, monospace;
    font-size: large;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    border-color: #00000000;
}

.optionCard:hover {
    transform: scale(1.05);
}

.clientPfp, .pfpSelect {
    margin-left: 50px;
    border-radius: 100%;
    background-color: white;
    padding: 2px;
    cursor: pointer;
    transition: all 300ms linear;
}

.pfpSelect {
    margin-left: 0px;
}

.pfpSelect:hover {
    filter: brightness(50%);
}

.arabic {
    letter-spacing: 0px !important;
}

#formError {
    background-color: #f03c3ca2;
    width: max-content;
    padding: 20px;
    border-radius: 10px;
    font-weight: bold;
    border: 2px solid;
    border-color: #f03c3c;
    display: none;
}

html.dark .dropdown-menu > li a:hover, html.dark .dropdown-menu > li a:focus {
    background-color: #78d693 !important;
}

html.dark .dropdown-menu > li a {
    transition: all 300ms ease !important;
}

.dropdown:focus-visible {
    outline: none;
}

.pfpDropdown:hover > .clientPfp {
    outline: #78d693 4px solid;
}

.homepage-button:first-child {
	margin-right: 5px;
}
.homepage-button:last-child {
	margin-left: 5px;
}

@keyframes gradMove {
    0% {
        background-position: 0% 50%;
        color: var(--purchase-btn-ending-color);
    }

    50% {
        background-position: 100% 50%;
        color: var(--purchase-btn-starting-color);
    }

    100% {
        background-position: 0% 50%;
        color: var(--purchase-btn-ending-color);
    }
}

@media (max-width: 991px) {
    html #header.header-transparent .header-body {
        overflow: visible;
    }

    html #header.header-transparent .header-nav-main nav {
        margin-top: -70px
    }

    #deadline {
        width: 100%;
    }

    #deadline h4 {
        font-size: 40px !important;
    }

    #deadline #grid {
        column-gap: 1%;
    }

    #desktopIcon {
        opacity: 0;
    }

    .textInput input, .selectInput select, .imgInput input {
        min-width: 350px;
    }

    .sideButtonInput {
        min-width: 300px !important;
    }

    #title {
        margin-left: 0px !important;
        text-align: center;
    }

    .subheader {
        margin-left: 0px !important;
    }

    #planSubmission, #loginSubmission {
        min-width: 210px;
        min-height: 70px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .planCard {
        display: none;
    }

    #planTemplateSelector {
        grid-template-columns: auto;
        row-gap: 20px;
    }

    .optionCard {
        width: 100%;
    }

	.homepage-button:first-child {
		margin-right: 0px;
		margin-bottom: 5px;
	}
	.homepage-button:last-child {
		margin-left: 0px;
		margin-top: 5px;
	}
}

@media (max-width: 300px) {
    #deadline {
        width: 100%;
        height: 100px;
    }

    #deadline h4 {
        font-size: 20px !important;
        transform: translateY(0px);
    }

    #deadline span {
        font-size: 10px !important;
        transform: translateY(-50%);
    }

    #deadline #grid {
        column-gap: 1%;
    }

    .textInput input, .selectInput select, .imgInput input {
        min-width: 250px;
    }

    .price {
        display: none;
    }
}