.modal-container {
    @apply fixed top-0 left-0 inset-0 flex h-screen w-full md:w-screen overflow-hidden justify-center items-center bg-gray-500 z-50 backdrop-filter backdrop-blur-sm
}

.modal-box {
    @apply relative flex flex-col md:min-w-[3rem] md:max-w-2xl
}

.modal-header {
    @apply relative flex flex-row z-10
}

.modal-actions-container {
    @apply flex flex-row h-10
}

.modal-action-buttons {
    @apply flex flex-row justify-center items-center px-1 my-1 space-x-1 border rounded-full
}

.modal-close-button {
    @apply flex justify-center items-center hover:text-red-500 focus:text-red-700 h-full cursor-pointer
}

.modal-content-container {
    @apply flex flex-col justify-center items-center px-16 pt-8
}

.modal-custom-content-container {
    @apply flex items-center p-4
}

.modal-content {
    @apply text-center space-y-4 w-full
}

.modal-content-default {
    @apply text-xl text-center
}

.modal-icon {
    @apply flex pb-4
}

.modal-icon-default {
    @apply h-28 w-28
}

.modal-footer-container {
    @apply flex justify-between w-full p-4  whitespace-normal
}

.modal-countdown {
    @apply absolute top-0 w-screen h-2 bg-gray-50 bg-opacity-60 transition-all
}
#countdown {
    @apply h-2
}

.modal-countdown #close {
    @apply h-2
}

.modal-footer-item {
    @apply flex flex-wrap space-x-2
}

.modal-footer-left {
    @apply inline-flex flex-grow space-x-2 justify-start
}

.modal-footer-center {
    @apply inline-flex flex-grow space-x-2 justify-center
}

.modal-footer-right {
    @apply inline-flex flex-grow space-x-2 justify-end
}

/*<editor-fold desc="Modal Background Color Styles">*/
/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.modal-container-black {
    @apply bg-gray-800 bg-opacity-75
}

.modal-container-black #countdown {
    @apply bg-gray-800
}

/*Blue*/
.modal-container-blue {
    @apply bg-blue-900 bg-opacity-75
}

.modal-container-blue #countdown {
    @apply bg-blue-500
}

/*Gray*/
.modal-container-gray {
    @apply bg-gray-500 bg-opacity-75
}

.modal-container-gray #countdown {
    @apply bg-gray-500
}

/*Green*/
.modal-container-green {
    @apply bg-green-900 bg-opacity-75
}

.modal-container-green #countdown {
    @apply bg-green-500
}

/*Indigo*/
.modal-container-indigo {
    @apply bg-indigo-900 bg-opacity-75
}

.modal-container-indigo #countdown {
    @apply bg-indigo-500
}

/*Pink*/
.modal-container-pink {
    @apply bg-pink-900 bg-opacity-75
}

.modal-container-pink #countdown {
    @apply bg-pink-500
}

/*Purple*/
.modal-container-purple {
    @apply bg-purple-900 bg-opacity-75
}

.modal-container-purple #countdown {
    @apply bg-purple-500
}

/*Red*/
.modal-container-red {
    @apply bg-red-900 bg-opacity-75
}

.modal-container-red #countdown {
    @apply bg-red-500
}

/*White*/
.modal-container-white {
    @apply bg-gray-50 bg-opacity-75
}

.modal-container-white #countdown {
    @apply bg-gray-500
}

/*Yellow*/
.modal-container-yellow {
    @apply bg-yellow-900 bg-opacity-75
}

.modal-container-yellow #countdown {
    @apply bg-yellow-500
}

/*</editor-fold>*/


/*<editor-fold desc="Filled Style">*/
.modal-filled-base {
    @apply text-white
}

.modal-filled-base .modal-header {
    @apply justify-between p-2 -mb-8 items-stretch
}

.modal-filled-base .modal-close-button {
    @apply ml-2 mt-1 bg-white text-red-500 rounded-full hover:bg-red-500 hover:text-white w-8 h-8
}

/*Title Styles*/
.modal-filled-base #content-title-container {
    @apply flex flex-col w-full text-center -mt-2 mb-4
}

.modal-filled-base #content-title {
    @apply text-3xl
}

.modal-filled-base #content-sub-title {
    @apply text-xl
}

.modal-filled-base .modal-icon-default {
    @apply bg-white bg-opacity-80 rounded-full
}

/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.modal-filled-black {
    @apply bg-gray-700 border-black
}

/*Blue*/
.modal-filled-blue {
    @apply bg-blue-500 border-blue-500
}

/*Gray*/
.modal-filled-gray {
    @apply bg-gray-500 border-gray-500
}

/*Green*/
.modal-filled-green {
    @apply bg-green-500 border-green-500
}

/*Indigo*/
.modal-filled-indigo {
    @apply bg-indigo-500 border-indigo-500
}

/*Pink*/
.modal-filled-pink {
    @apply bg-pink-500 border-pink-500
}

/*Purple*/
.modal-filled-purple {
    @apply bg-purple-500 border-purple-500
}

/*Red*/
.modal-filled-red {
    @apply bg-red-500 border-red-500
}

/*White*/
.modal-filled-white {
    @apply bg-white border-gray-300 text-gray-700
}

/*Yellow*/
.modal-filled-yellow {
    @apply bg-yellow-500 border-yellow-400
}

/*</editor-fold>*/

/*<editor-fold desc="Elegant Style">*/

.modal-elegant-base {
    @apply flex
}

/*Dark Mode Styles*/
.modal-elegant-dark {
    @apply bg-gray-700 text-white
}

.modal-elegant-dark .modal-action-buttons {
    @apply border-white text-white
}

.modal-elegant-dark .box-close {
    @apply text-white
}

.modal-elegant-light {
    @apply bg-white text-gray-700
}

.modal-elegant-light .modal-action-buttons {
    @apply border-gray-700 text-gray-700
}

.modal-elegant-light .modal-close {
    @apply text-gray-700
}

/*Header Style*/
.modal-elegant-base .modal-header {
    @apply justify-between p-2 items-stretch
}

/*Title Styles*/
.modal-elegant-base #title-container {
    @apply flex flex-col justify-center
}

.modal-elegant-base #top-title {
    @apply text-3xl
}

.modal-elegant-base #top-sub-title {
    @apply text-xl
}

/*Seperator*/
.modal-elegant-base #header-separator {
    @apply flex h-1 mx-2 rounded-full
}


/*Colors: black, blue, gray, green, indigo, pink, purple, white and yellow*/
/*Black*/
.modal-elegant-black #header-separator {
    @apply bg-gray-600
}

/*Blue*/
.modal-elegant-blue #header-separator {
    @apply bg-blue-500
}

/*Gray*/
.modal-elegant-gray #header-separator {
    @apply bg-gray-400
}

/*Green*/
.modal-elegant-green #header-separator {
    @apply bg-green-500
}

/*Indigo*/
.modal-elegant-indigo #header-separator {
    @apply bg-indigo-500
}

/*Pink*/
.modal-elegant-pink #header-separator {
    @apply bg-pink-500
}

/*Purple*/
.modal-elegant-purple #header-separator {
    @apply bg-purple-500
}

/*Red*/
.modal-elegant-red #header-separator {
    @apply bg-red-500
}

/*White*/
.modal-elegant-white #header-separator {
    @apply bg-gray-200
}

/*Yellow*/
.modal-elegant-yellow #header-separator {
    @apply bg-yellow-500
}

/*</editor-fold>*/
