html.modal-active,body.modal-active {direction:rtl; overflow: hidden;}
#modal-container {direction:rtl;  position: fixed; display: table; height: 100%; width: 100%; top: 0; left: 0; transform: scale(0); z-index: 1;}
#modal-container.six {direction:rtl;  transform: scale(1);}
#modal-container.six .modal-background { background: rgba(0, 0, 0, 0); animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six .modal-background .modal { background-color: transparent; animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six.out { animation: quickScaleDown 0s 0.1s linear forwards;}
#modal-container.six.out .modal-background { animation: fadeOut 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six.out .modal-background .modal { animation: modalFadeOut 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container .modal-background { display: table-cell; background: rgba(0, 0, 0, 0.8); text-align: center; vertical-align: middle;}
#modal-container .modal-background .modal {background:white; padding:20px; display:inline-block; border-radius:5px; position:relative;}
#modal-container .modal-background .modal .modal-svg {z-index:1; position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 3px;}
#modal-container .modal-background .modal .modal-svg rect {z-index:1; stroke: #fff; stroke-width: 2px; stroke-dasharray: 778; stroke-dashoffset: 778;}
#modal-container.six .modal-background .modal .modal-svg rect {z-index:1; animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal-container.six.out .modal-background .modal .modal-svg rect {z-index:1; animation: sketchOut 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}

@keyframes fadeIn { 0% { background: rgba(0, 0, 0, 0); } 100% { background: rgba(0, 0, 0, 0.7); }}
@keyframes fadeOut { 0% { background: rgba(0, 0, 0, 0.7); } 100% { background: rgba(0, 0, 0, 0); }}
@keyframes quickScaleDown { 0% { transform: scale(1); } 50% { transform: scale(0.5); } 100% { transform: scale(0); }}
@keyframes sketchIn { 0% { stroke-dashoffset: 778; } 100% { stroke-dashoffset: 0; }}
@keyframes sketchOut { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 778; }}
@keyframes modalFadeIn { 0% { background-color: transparent; } 100% { background-color: white; }}
@keyframes modalFadeOut { 0% { background-color: white; } 100% { background-color: transparent; }}
@keyframes modalContentFadeIn { 0% { opacity: 0; top: -20px; } 100% { opacity: 1; top: 0; }}
@keyframes modalContentFadeOut { 0% { opacity: 1; top: 0px; } 100% { opacity: 0; top: -20px; }}