$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1600px;

/* New way to define colors */
@property --color-white {syntax: "<color>";inherits: true;initial-value: #FFFFFF;}
@property --color-black {syntax: "<color>";inherits: true;initial-value: #111111;}
@property --color-primary {syntax: "<color>";inherits: true;initial-value: #3a96e0}
@property --color-primary-dark {syntax: "<color>";inherits: true;initial-value: #03467d;}
@property --color-primary-dark-light {syntax: "<color>";inherits: true;initial-value: #0160ac;}
@property --color-gray {syntax: "<color>";inherits: true;initial-value: #F1F1F1}
@property --color-dark-gray {syntax: "<color>";inherits: true;initial-value: #555}
@property --color-gray-line {syntax: "<color>";inherits: true;initial-value: #CCC}
@property --color-danger {syntax: "<color>";inherits: true;initial-value: #e11414}
@property --color-danger-dark {syntax: "<color>";inherits: true;initial-value: #891010}
@property --color-danger-light {syntax: "<color>";inherits: true;initial-value: #fc6363}
@property --color-warning {syntax: "<color>";inherits: true;initial-value: #e69305}
@property --color-warning-dark {syntax: "<color>";inherits: true;initial-value: #9f6809}
@property --color-warning-light {syntax: "<color>";inherits: true;initial-value: #f5c776}
@property --color-success {syntax: "<color>";inherits: true;initial-value: #00bc00}
@property --color-success-dark {syntax: "<color>";inherits: true;initial-value: #244d0e}
@property --color-success-light {syntax: "<color>";inherits: true;initial-value: #68f96e}
@property --color-button-shadow {syntax: "<color>";inherits: true;initial-value: #517fc4}

/* Transparent Colors */
$color-wait: rgba(255, 255, 255, .8);
$color-shadow: 0 1rem 1.5rem -.5rem rgb(0 0 0 / 15%);
