body {
    margin: 0px 0px 0px 0px;
    background-color: #F7EBD7;
}
textarea {
    float: right;
    width: inherit;
    height: inherit;
    background: transparent;
    direction: rtl;
    resize: none;
    border: none;
    outline: none;
}
/* === Page & Templates === */
.PageContainer {
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 100%;
    /*width: 1024px;
    margin-left: -512px;
    position: absolute;
    left: 50%;*/
}
.FirstPageTemplateContainer {
    float: left;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: inherit;
}
.DefaultPageTemplateContainer {
    float: left;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: inherit;
}
.DefaultPageContentContainer {
    /*float: right;*/
    position: absolute;
    top: 228px;
    left: 100%;
    margin-left: -1024px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 1024px;
}
.DefaultPageContentContainerOnBackground {
    float: right;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 1024px;
}
.BlueStripesBackground {
    float: left;
    margin-top: 50px;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Background/BlueStripesBackground.png);
    /*background-color: red;*/
}
.RedStripesBackground {
    float: left;
    margin-top: 50px;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Background/RedStripesBackground.png);
    /*background-color: red;*/
}
.LargeCardContainer {
    width: 228px;
    height: 338px;
    /*background-color: red;
    opacity: 0.5;*/
}
.MediumCardContainer {
    width: 176px;
    height: 260px;
    /*background-color: red;
    opacity: 0.5;*/
}
.SmallCardContainer {
    width: 73px;
    height: 108px;
    /*background-color: red;
    opacity: 0.5;*/
}
.MovableLargeCard {
    width: 228px;
    height: 338px;
    cursor: move;
}
.StaticLargeCard {
    width: 228px;
    height: 338px;
}
.LargeCardTitle {
    float: left;
    margin-top: 288px;
    width: inherit;
    height: 40px;
    line-height: 20px;
    text-align: center;
    color: black;
    font-weight: bold;
    /*background-color: red;
    opacity: 0.5;*/
}
.MovableMediumCard {
    width: 176px;
    height: 260px;
    cursor: move;
}
.MediumCardTitle {
    float: left;
    margin-top: 164px;
    margin-left: 5px;
    width: 121px;
    height: 30px;
    line-height: 15px;
    text-align: center;
    color: black;
    font-size: 10px;
    font-weight: bold;
    /*background-color: red;
    opacity: 0.5;*/
}
.MovableSmallCard {
    width: 73px;
    height: 108px;
    cursor: move;
}
/* === TitleBar === */
.TitleBarContainer {
    float: left;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: 77px;
}
.TitleBar {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/TitleBar_Wide2.png);
}
.TitleBarOptionsContainer {
    float: right;
    margin-top: 23px;
    padding: 0px 0px 0px 0px;
    width: 326px;
    height: 30px;
    background-image: url(../Images/Controls/TitleBarOptions2.png);
}
.TitleBarLogoContainer {
    position: absolute;
    top: 11px;
    left: 50%;
    margin-left: -86px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 172px;
    height: 54px;
    background-image: url(../Images/Controls/TitleLogo.png);
}
.TitleBarOptionsLinkContainer {
    float: left;
    width: 160px;
    height: 30px;
    cursor: pointer;
}
/* === MenuDashButtons === */
.MenuDashButtonsContainer {
    /*float: left;*/
    position: absolute;
    top: 371px;
    left: 50%;
    margin-left: -512px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 1024px;
    height: 426px;
}
.MenuDashButtons {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/MenuDashButtons2.png);
}
.MagicPowerSelectionDashButton {
    position: absolute;
    top: 89px;
    left: 747px;
    width: 209px;
    height: 124px;
    /*background-color: white;*/
    cursor: pointer;
}
.DemonSelectionDashButton {
    position: absolute;
    top: 89px;
    left: 520px;
    width: 212px;
    height: 124px;
    /*background-color: white;*/
    cursor: pointer;
}
.DemonGangDashButton {
    position: absolute;
    top: 89px;
    left: 295px;
    width: 211px;
    height: 124px;
    /*background-color: white;*/
    cursor: pointer;
}
.PowerAgainstDemonDashButton {
    position: absolute;
    top: 89px;
    left: 67px;
    width: 213px;
    height: 124px;
    /*background-color: white;*/
    cursor: pointer;
}
.CoveredCardsDashButton {
    position: absolute;
    top: 231px;
    left: 641px;
    width: 211px;
    height: 125px;
    /*background-color: white;*/
    cursor: pointer;
}
.CaseAnalysisDashButton {
    position: absolute;
    top: 231px;
    left: 415px;
    width: 211px;
    height: 125px;
    /*background-color: white;*/
    cursor: pointer;
}
.GameInPairsDashButton {
    position: absolute;
    top: 231px;
    left: 190px;
    width: 210px;
    height: 125px;
    /*background-color: white;*/
    cursor: pointer;
}
/* === MenuBar === */
.MenuBarContainer {
    /*float: left;*/
    position: absolute;
    top: 77px;
    left: 50%;
    margin-left: -512px;
    width: 1024px;
    height: 101px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
}
.MenuBarPlaceholder {
    float: left;
    width: inherit;
    height: 101px;
}
.MenuBar {
    float: left;
    padding: 9px 0px 10px 0px;
    width: inherit;
    height: inherit;
}
.MagicPowerSelectionMenuBar {
    background-image: url(../Images/Controls/MagicPowerSelectionMenuBar.png);
}
.DemonSelectionMenuBar {
    background-image: url(../Images/Controls/DemonSelectionMenuBar.png);
}
.DemonGangMenuBar {
    background-image: url(../Images/Controls/DemonGangMenuBar.png);
}
.PowerAgainstDemonMenuBar {
    background-image: url(../Images/Controls/PowerAgainstDemonMenuBar.png);
}
.CoveredCardsMenuBar {
    background-image: url(../Images/Controls/CoveredCardsMenuBar.png);
}
.CaseAnalysisMenuBar {
    background-image: url(../Images/Controls/CaseAnalysisMenuBar.png);
}
.GameInPairsMenuBar {
    background-image: url(../Images/Controls/GameInPairsMenuBar.png);
}
.MenuBarButtonContainer {
    float: left;
    padding: 0px 0px 0px 0px;
    height: 82px;
    width: 137px;
    /* background-color: white; */
    cursor: pointer;
}
.MenuBarButtonSpacer {
    float: left;
    padding: 0px 0px 0px 0px;
    height: 30px;
    width: 10px;
}
.MenuBarSelectedButton {
    float: left;
    padding: 0px 0px 0px 0px;
    height: inherit;
    width: inherit;
    /* background-color: white; */
}
/* === SelectionBar === */
.OpenSelectionBar {
    position: fixed;
    /*top: 85px;*/
    top: 50%;
    margin-top: -298px;
    /*left: 248px;*/
    left: 0px;
    width: 469px;
    height: 596px;
    padding: 0px 53px 0px 22px;
    background-image: url(../Images/Controls/OpenSelectionBar.png);
    z-index: 500;
}
.OpenSelectionBarHandle {
    float: right;
    width: 23px;
    height: 596px;
    /*background-color: white;
    opacity: 0.5;*/
    cursor: pointer;
}
.OpenSelectionBarTrashBin {
    float: left;
    width: 40px;
    height: 40px;
    margin: 20px 220px 12px 65px;
    /*background-color: white;
    opacity: 0.5;*/
}
.OpenSelectionBarTopSpacer {
    float: left;
    width: 350px;
    height: 19px;
    /*background-color: yellow;
    opacity: 0.5;*/
}
.OpenSelectionBarCardContainer {
    float: left;
    width: 73px;
    height: 108px;
    /*background-color: red;
    opacity: 0.5;*/
    /*background-image: url(../Images/Cards/SampleCardSmall.png);*/
}
.OpenSelectionBarHSpacer {
    float: left;
    width: 15px;
    height: 108px;
    /*background-color: red;*/
    /*background-image: url(../Images/Cards/SampleCardSmall.png);*/
}
.OpenSelectionBarVSpacer {
    float: left;
    width: 350px;
    height: 26px;
    /*background-color: red;*/
}
.ClosedSelectionBar {
    position: fixed;
    /*top: 85px;*/
    top: 50%;
    margin-top: -297px;
    left: 0px;
    width: 108px;
    height: 594px;
    padding: 0px 55px 0px 0px;
    background-image: url(../Images/Controls/ClosedSelectionBar.png);
    z-index: 500;
}
.ClosedSelectionBarHandle {
    float: right;
    width: 24px;
    height: 594px;
    /*background-color: white;
    opacity: 0.5;*/
    cursor: pointer;
}
.ClosedSelectionBarMagicPowerDropZone {
    float: left;
    width: 29px;
    height: 281px;
    /*background-color: blue;
    opacity: 0.5;*/
}
.ClosedSelectionBarDemonDropZone {
    float: left;
    width: 29px;
    height: 313px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === MagicPowerDialog === */
.MagicPowerDialogContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -325px;
    width: 802px;
    height: 456px;
    z-index: 1000;
}
/* MagicPowerDefault */
.MagicPowerDialogDefault {
    float: left;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/MagicPowerDialog.png);
}
#MagicPowerDialogDefaultClose {
    position: absolute;
    top: 11px;
    left: 760px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#MagicPowerDialogDefaultPlus {
    position: absolute;
    top: 387px;
    left: 622px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#MagicPowerDialogDefaultQuestion {
    position: absolute;
    top: 387px;
    left: 660px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#MagicPowerDialogDefaultCardContainer {
    position: absolute;
    top: 30px;
    left: 534px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* MagicPowerPlus */
.MagicPowerDialogPlus {
    float: left;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/MagicPowerDialogPlus.png);
}
#MagicPowerDialogPlusClose {
    position: absolute;
    top: 11px;
    left: 760px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#MagicPowerDialogPlusQuestion {
    position: absolute;
    top: 387px;
    left: 660px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#MagicPowerDialogPlusCardContainer {
    position: absolute;
    top: 30px;
    left: 534px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* MagicPowerQuestion */
.MagicPowerDialogQuestion {
    float: left;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/MagicPowerDialogQuestion.png);
}
#MagicPowerDialogQuestionClose {
    position: absolute;
    top: 11px;
    left: 760px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#MagicPowerDialogQuestionPlus {
    position: absolute;
    top: 387px;
    left: 622px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#MagicPowerDialogQuestionCardContainer {
    position: absolute;
    top: 30px;
    left: 534px;
    /*background-color: red;
    opacity: 0.5;*/
}
#MagicPowerDialogQuestionTextContainer {
    position: absolute;
    top: 49px;
    left: 54px;
    width: 430px;
    height: 365px;
    /*background-color: red;
    opacity: 0.5;*/
}
#MagicPowerDialogQuestionText {
    float: right;
    width: inherit;
    height: inherit;
    direction: rtl;
    font-size: 16px;
}
/* === DemonDialog === */
.DemonDialogContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -325px;
    width: 802px;
    height: 456px;
    z-index: 1000;
}
/* DemonDefault */
.DemonDialogDefault {
    float: left;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/DemonDialog.png);
}
#DemonDialogDefaultClose {
    position: absolute;
    top: 11px;
    left: 760px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonDialogDefaultPlus {
    position: absolute;
    top: 387px;
    left: 622px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonDialogDefaultQuestion {
    position: absolute;
    top: 387px;
    left: 660px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonDialogDefaultCardContainer {
    position: absolute;
    top: 30px;
    left: 534px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* DemonPlus (ID) */
.DemonDialogPlus {
    float: left;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/DemonDialogID.png);
}
#DemonDialogPlusClose {
    position: absolute;
    top: 11px;
    left: 760px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonDialogPlusQuestion {
    position: absolute;
    top: 387px;
    left: 660px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonDialogPlusCardContainer {
    position: absolute;
    top: 30px;
    left: 534px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* DemonQuestion (Exclamation) */
.DemonDialogQuestion {
    float: left;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/DemonDialogExclamation.png);
}
#DemonDialogQuestionClose {
    position: absolute;
    top: 11px;
    left: 760px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonDialogQuestionPlus {
    position: absolute;
    top: 387px;
    left: 622px;
    width: 33px;
    height: 33px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonDialogQuestionCardContainer {
    position: absolute;
    top: 30px;
    left: 534px;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonDialogQuestionTextContainer {
    position: absolute;
    top: 49px;
    left: 54px;
    width: 430px;
    height: 365px;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonDialogQuestionText {
    float: right;
    width: inherit;
    height: inherit;
    direction: rtl;
    font-size: 16px;
}
/* === GuidedSentenceBar === */
.GuidedSentenceBarContainer {
    /*float: left;
    width: inherit;*/
    position: absolute;
    top: 178px;
    left: 50%;
    margin-left: -512px;
    width: 1024px;
    height: 50px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    background-color: #254F6F;
}
.GuidedSentenceBar {
    float: right;
    padding: 0px 0px 0px 0px;
    width: 1024px;
    height: inherit;
    background-image: url(../Images/Controls/GuidedSentenceBar.png);
}
.GuidedSentenceBarEditButton {
    float: right;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.GuidedSentenceBarContent {
    float: right;
    padding: 0px 10px 0px 0px;
    width: 980px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: white;
    direction: rtl;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === GuidedSentenceSelection === */
.GuidedSentenceSelectionContainer {
    /*float: left;*/
    position: absolute;
    top: 77px;
    left: 50%;
    margin-left: -512px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 1024px;
    height: 294px;
}
.GuidedSentenceSelection {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/GuidedSentenceSelection2.png);
}
#GuidedSentenceInputContainer {
    position: absolute;
    top: 133px;
    left: 76px;
    width: 384px;
    height: 106px;
    /*background-color: red;
    opacity: 0.5;*/
}
#GuidedSentenceSelectionSubmitButton {
    position: absolute;
    top: 247px;
    left: 30px;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#GuidedSentenceQuestionsContainer {
    position: absolute;
    top: 99px;
    left: 493px;
    width: 458px;
    height: 145px;
    /*background-color: red;
    opacity: 0.5;*/
}
.GuidedSentenceQuestionButton {
    float: left;
    width: 214px;
    height: 39px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
.GuidedSentenceQuestionButtonSpacer {
    float: left;
    width: 214px;
    height: 39px;
    /*background-color: red;
    opacity: 0.5;*/
}
.GuidedSentenceQuestionHSpacer {
    float: left;
    width: 28px;
    height: 39px;
    /*background-color: red;
    opacity: 0.5;*/
}
.GuidedSentenceQuestionVSpacer {
    float: left;
    width: 458px;
    height: 13px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === GuidedSentenceSelected === */
.GuidedSentenceSelectedContainer {
    /*float: left;*/
    position: absolute;
    top: 77px;
    left: 50%;
    margin-left: -512px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 1024px;
    height: 294px;
}
.GuidedSentenceSelected {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/GuidedSentenceSelected2.png);
}
.GuidedSentenceSelectedEditButton {
    float: right;
    margin: 50px 5px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.GuidedSentenceSelectedContent {
    float: right;
    margin: 50px 5px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 980px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: white;
    direction: rtl;
    /*background-color: red;
    opacity: 0.5;*/
}
/* -=- C O N T E N T -=- */
/* === MagicPowerSelectionContent === */
.MagicPowerSelectionContent {
    float: left;
    padding: 22px 0px 0px 18px;
    width: inherit;
    height: 4773px;
    background-image: url(../Images/Background/MagicPowerSelectionBackground2.png);
}
.MagicPowerSelectionCardContainer {
    float: left;
    width: 176px;
    height: 260px;
    /*background-color: yellow;
    opacity: 0.5;*/
}
/*
.MagicPowerSelectionMediumCard {
    width: 131px;
    height: 194px;
    cursor: move;
}
.MagicPowerSelectionSmallCard {
    width: 73px;
    height: 108px;
    cursor: move;
}
    */
.MagicPowerSelectionCardHSpacer1 {
    float: left;
    width: 28px;
    height: 194px;
    /*background-color: red;
    opacity: 0.5;*/
}
.MagicPowerSelectionCardHSpacer2 {
    float: left;
    width: 24px;
    height: 194px;
    /*background-color: red;
    opacity: 0.5;*/
}
.MagicPowerSelectionCardVSpacer {
    float: left;
    width: 950px;
    height: 32px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === DemonSelectionContent === */
.DemonSelectionContent {
    float: left;
    padding: 22px 0px 0px 18px;
    width: inherit;
    height: 4463px;
    background-image: url(../Images/Background/DemonSelectionBackground2.png);
}
.DemonSelectionCardContainer {
    float: left;
    width: 176px;
    height: 260px;
    /*background-color: yellow;
    opacity: 0.5;*/
}
.DemonSelectionMediumCard {
    /*float: left;*/
    width: 131px;
    height: 194px;
    /*background-image: url(../Images/Cards/SampleCardMedium.png);*/
    cursor: move;
}
.DemonSelectionCardHSpacer1 {
    float: left;
    width: 28px;
    height: 194px;
    /*background-color: red;
    opacity: 0.5;*/
}
.DemonSelectionCardHSpacer2 {
    float: left;
    width: 24px;
    height: 194px;
    /*background-color: red;
    opacity: 0.5;*/
}
.DemonSelectionCardVSpacer {
    float: left;
    width: 950px;
    height: 32px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === DemonGangContent === */
.DemonGangContent {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: 984px;
    background-image: url(../Images/Background/DemonGangBackground.png);
}
#DemonGangMainDemonCardContainer {
    position: absolute;
    top: 59px;
    left: 703px;
}
#DemonGangMinion1CardContainer {
    position: absolute;
    top: 23px;
    left: 18px;
}
#DemonGangMinion2CardContainer {
    position: absolute;
    top: 153px;
    left: 203px;
}
#DemonGangMinion3CardContainer {
    position: absolute;
    top: 267px;
    left: 387px;
}
#DemonGangMinion4CardContainer {
    position: absolute;
    top: 450px;
    left: 578px;
}
#DemonGangMinion5CardContainer {
    position: absolute;
    top: 552px;
    left: 768px;
}
#DemonGangTrashBin {
    position: absolute;
    top: 855px;
    left: 920px;
    width: 60px;
    height: 86px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === PowerAgainstDemonContent === */
.PowerAgainstDemonContent {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: 1203px;
    background-image: url(../Images/Background/PowerAgainstDemonBackground.png);
}
#PowerAgainstMainDemonCardContainer {
    position: absolute;
    top: 391px;
    left: 408px;
}
#PowerAgainstDemon1CardContainer {
    position: absolute;
    top: 120px;
    left: 676px;
}
#PowerAgainstDemon2CardContainer {
    position: absolute;
    top: 529px;
    left: 759px;
}
#PowerAgainstDemon3CardContainer {
    position: absolute;
    top: 870px;
    left: 560px;
}
#PowerAgainstDemon4CardContainer {
    position: absolute;
    top: 759px;
    left: 173px;
}
#PowerAgainstDemon5CardContainer {
    position: absolute;
    top: 379px;
    left: 120px;
}
#PowerAgainstDemon6CardContainer {
    position: absolute;
    top: 64px;
    left: 309px;
}
#PowerAgainstDemonTrashBin {
    position: absolute;
    top: 1076px;
    left: 920px;
    width: 60px;
    height: 86px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === CoveredCardsOpenCard === */
.CoveredCardsPowerOpenCardContainer {
    position: absolute;
    top: 190px;
    left: 355px;
    width: 314px;
    height: 415px;
    background-image: url(../Images/Controls/MagicPowerOpenCard.png);
    z-index: 1000;
}
.CoveredCardsDemonOpenCardContainer {
    position: absolute;
    top: 190px;
    left: 355px;
    width: 314px;
    height: 415px;
    background-image: url(../Images/Controls/DemonOpenCard.png);
    z-index: 1000;
}
.CoveredCardsOpenCardCardContainer {
    position: absolute;
    top: 40px;
    left: 43px;
    /*background-color: red;
    opacity: 0.5;*/
}
.CoveredCardsOpenCardClose {
    float: right;
    width: 35px;
    height: 35px;
    margin: 15px 15px 0px 0px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
.CoveredCardsOpenCardMask {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1024px;
    height: 660px;
    background-color: white;
    opacity: 0;
    z-index: 900;
}
/* === PowerCoveredCardsContent === */
.PowerCoveredCardsContent {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: 660px;
    background-image: url(../Images/Background/PowerCoveredCardsBackground.png);
}
.PowerCoveredCardsSwitchButton {
    position: absolute;
    top: 480px;
    left: 882px;
    width: 101px;
    height: 153px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice1 {
    position: absolute;
    top: 259px;
    left: 73px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice2 {
    position: absolute;
    top: 173px;
    left: 138px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice3 {
    position: absolute;
    top: 120px;
    left: 226px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice4 {
    position: absolute;
    top: 76px;
    left: 323px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice5 {
    position: absolute;
    top: 66px;
    left: 425px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice6 {
    position: absolute;
    top: 70px;
    left: 527px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice7 {
    position: absolute;
    top: 100px;
    left: 619px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice8 {
    position: absolute;
    top: 154px;
    left: 710px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice9 {
    position: absolute;
    top: 249px;
    left: 785px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerCoveredCardsChoice10 {
    position: absolute;
    top: 352px;
    left: 818px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === DemonCoveredCardsContent === */
.DemonCoveredCardsContent {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: 668px;
    background-image: url(../Images/Background/DemonCoveredCardsBackground.png);
}
.DemonCoveredCardsSwitchButton {
    position: absolute;
    top: 490px;
    left: 882px;
    width: 101px;
    height: 153px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice1 {
    position: absolute;
    top: 262px;
    left: 73px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice2 {
    position: absolute;
    top: 176px;
    left: 138px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice3 {
    position: absolute;
    top: 121px;
    left: 226px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice4 {
    position: absolute;
    top: 76px;
    left: 323px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice5 {
    position: absolute;
    top: 66px;
    left: 425px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice6 {
    position: absolute;
    top: 70px;
    left: 527px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice7 {
    position: absolute;
    top: 100px;
    left: 619px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice8 {
    position: absolute;
    top: 156px;
    left: 710px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice9 {
    position: absolute;
    top: 253px;
    left: 785px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonCoveredCardsChoice10 {
    position: absolute;
    top: 357px;
    left: 816px;
    width: 48px;
    height: 45px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === CaseAnalysisContent === */
.CaseAnalysisContent {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: 1708px;
    background-image: url(../Images/Background/CaseAnalysisBackground.png);
}
#CaseAnalysisEventInputContainer {
    position: absolute;
    top: 161px;
    left: 166px;
    width: 725px;
    height: 87px;
    margin: 5px 5px 5px 5px;
    /*background-color: red;
    opacity: 0.5;*/
}
#CaseAnalysisDemon1CardContainer {
    position: absolute;
    top: 398px;
    left: 298px;
}
#CaseAnalysisDemon2CardContainer {
    position: absolute;
    top: 398px;
    left: 512px;
}
#CaseAnalysisDemon3CardContainer {
    position: absolute;
    top: 398px;
    left: 725px;
}
#CaseAnalysisMagicHelper1CardContainer {
    position: absolute;
    top: 842px;
    left: 298px;
}
#CaseAnalysisMagicHelper2CardContainer {
    position: absolute;
    top: 842px;
    left: 512px;
}
#CaseAnalysisMagicHelper3CardContainer {
    position: absolute;
    top: 842px;
    left: 725px;
}
#CaseAnalysisMagicPower1CardContainer {
    position: absolute;
    top: 1261px;
    left: 298px;
}
#CaseAnalysisMagicPower2CardContainer {
    position: absolute;
    top: 1261px;
    left: 512px;
}
#CaseAnalysisMagicPower3CardContainer {
    position: absolute;
    top: 1261px;
    left: 725px;
}
#CaseAnalysisTrashBin {
    position: absolute;
    top: 1578px;
    left: 921px;
    width: 60px;
    height: 86px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === GameInPairsContent === */
.GameInPairsContent {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: 658px;
    background-image: url(../Images/Background/GameInPairsBackground.png);
}
#GameInPairsMagicPowerCardContainer {
    position: absolute;
    top: 124px;
    left: 250px;
}
#GameInPairsDemonCardContainer {
    position: absolute;
    top: 124px;
    left: 566px;
}
#GameInPairsTrashBin {
    position: absolute;
    top: 536px;
    left: 925px;
    width: 60px;
    height: 86px;
    /*background-color: red;
    opacity: 0.5;*/
}
.QuestionsDialogButton {
    float: left;
    width: inherit;
    height: 29px;
    cursor: pointer;
    /* background-color: red;
    opacity: 0.5; */
}
/* === QuestionsForMeetingDialog === */
.QuestionsForMeetingDialogContainer {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -369px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 739px;
    height: 413px;
    z-index: 1000;
    /*background-color: red;
    opacity: 0.5;*/
}
.QuestionsForMeetingDialog {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/QuestionsForMeeting.png);
}
#QuestionsForMeetingDialogClose {
    position: absolute;
    top: 15px;
    left: 689px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#QuestionsForMeetingButtonContainer {
    position: absolute;
    top: 60px;
    left: 68px;
    width: 29px;
    height: 304px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === QuestionsForParentsDialog === */
.QuestionsForParentsDialogContainer {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -369px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 739px;
    height: 739px;
    z-index: 1000;
    /*background-color: red;
    opacity: 0.5;*/
}
.QuestionsForParentsDialog {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/QuestionsForParents.png);
}
#QuestionsForParentsDialogClose {
    position: absolute;
    top: 15px;
    left: 688px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#QuestionsForParentsButtonContainer {
    position: absolute;
    top: 67px;
    left: 49px;
    width: 30px;
    height: 611px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === QuestionsForPartingDialog === */
.QuestionsForPartingDialogContainer {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -369px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 739px;
    height: 345px;
    z-index: 1000;
    /*background-color: red;
    opacity: 0.5;*/
}
.QuestionsForPartingDialog {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/QuestionsForParting.png);
}
#QuestionsForPartingDialogClose {
    position: absolute;
    top: 15px;
    left: 689px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#QuestionsForPartingButtonContainer {
    position: absolute;
    top: 60px;
    left: 68px;
    width: 29px;
    height: 234px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === PowerQuestionsDialog === */
.PowerQuestionsDialogContainer {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -369px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 739px;
    height: 739px;
    z-index: 1000;
    /*background-color: red;
    opacity: 0.5;*/
}
.PowerQuestionsDialog {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/PowerQuestions.png);
}
#PowerQuestionsDialogClose {
    position: absolute;
    top: 15px;
    left: 688px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#PowerQuestionsButtonContainer {
    position: absolute;
    top: 66px;
    left: 49px;
    width: 30px;
    height: 651px;
    /*background-color: red;
    opacity: 0.5;*/
}
/* === DemonQuestionsDialog === */
.DemonQuestionsDialogContainer {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -369px;
    border: solid 0px #000000;
    padding: 0px 0px 0px 0px;
    width: 739px;
    height: 642px;
    z-index: 1000;
    /*background-color: red;
    opacity: 0.5;*/
}
.DemonQuestionsDialog {
    float: left;
    padding: 0px 0px 0px 0px;
    width: inherit;
    height: inherit;
    background-image: url(../Images/Controls/Dialogs/DemonQuestions.png);
}
#DemonQuestionsDialogClose {
    position: absolute;
    top: 15px;
    left: 688px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    /*background-color: red;
    opacity: 0.5;*/
}
#DemonQuestionsButtonContainer {
    position: absolute;
    top: 59px;
    left: 67px;
    width: 30px;
    height: 551px;
    /*background-color: red;
    opacity: 0.5;*/
}
* Login Styles *
#cards-login{
    max-width: 960px;
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
#cards-login #logo-wrap{
    text-align: center;
    margin-bottom: 25px;
}
/*#cards-login .row{*/
/*    padding: 50px;*/
/*    background-color: #fff;*/
/*}*/
/* #cards-login #btns-wrap{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
} */
#cards-login #btns-wrap .btn{
    width: 45%;
}

.TitleBarOptionsLinkContainer1{
    float: left;
    width: 50px;
    height: 30px;
    cursor: pointer;
    margin-left: 60px;
    /* background-color: red;
    opacity: 0.5; */
}

.TitleBarOptionsLinkContainer2{
    float: left;
    width: 40px;
    height: 30px;
    margin-left: 15px;
    cursor: pointer;
    /* background-color: red;
    opacity: 0.5; */
}