/* ************************** */
/* AREA RESOURCES */
/* ************************** */

/* GROUP MAIN */
.app-area[area="resources"] .app-section[group="main"] .app-background[bkg="1"] {
    background-image: url(../../assets/image/resources/bkg_resources.png);
}

/* BOTTOM NAVIGATION MENU */
.app-area[area="resources"] .button[buttonid="back"] {
    background-image: url(../../assets/image/common/btn_back_text.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    position: absolute;
    top: 1949px;
    left: 75px;
    width: 98px;
    height: 145px;
}

.app-area[area="resources"] .button[buttonid="back"] .icon {
    background-image: url(../../assets/image/common/btn_back_icon.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 98px;
    height: 98px;
}

.app-area[area="resources"] .button[buttonid="resources"] {
    background-image: url(../../assets/image/common/btn_resources_text.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    position: absolute;
    top: 1949px;
    left: 206px;
    width: 163px;
    height: 145px;
}

.app-area[area="resources"] .button[buttonid="resources"] .icon {
    background-image: url(../../assets/image/common/btn_resources_icon.png);
    position: absolute;
    top: 0px;
    left: 39px;
    width: 98px;
    height: 98px;
}

.app-area[area="resources"] .button[buttonid="home"] {
    background-image: url(../../assets/image/common/btn_home_text.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    position: absolute;
    top: 1949px;
    left: 406px;
    width: 98px;
    height: 145px;
}

.app-area[area="resources"] .button[buttonid="home"] .icon {
    background-image: url(../../assets/image/common/btn_home_icon.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 98px;
    height: 98px;
}

.app-area[area="resources"] .button[buttonid="next"] {
    background-image: url(../../assets/image/common/btn_next_text.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    position: absolute;
    top: 1949px;
    left: 571px;
    width: 98px;
    height: 145px;
}

.app-area[area="resources"] .button[buttonid="next"] .icon {
    background-image: url(../../assets/image/common/btn_next_icon.png);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 98px;
    height: 98px;
}

/* SLIDE 1 */
.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"]  {
    background-image: url(../../assets/image/resources/slide1.png);
    width: 100%;
    height: 100%;
    position: absolute;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="resetslide"] {
    position: absolute;
    top: 32px;
    left: 0;
    width: 820px;
    height: 147px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="returnpatientcase"] {
    background-image: url(../../assets/image/resources/btn_returnpatientcase.png);
    position: absolute;
    top: 60px;
    left: 2925px;
    width: 684px;
    height: 85px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup1"] {
    background-image: url(../../assets/image/resources/slide1_btn1_off.png);
    position: absolute;
    top: 790px;
    left: 555px;
    width: 190px;
    height: 73px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup1"].active {
    background-image: url(../../assets/image/resources/slide1_btn1_on.png);
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup2"] {
    background-image: url(../../assets/image/resources/slide1_btn2_off.png);
    position: absolute;
    top: 790px;
    left: 766px;
    width: 190px;
    height: 73px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup2"].active {
    background-image: url(../../assets/image/resources/slide1_btn2_on.png);
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup3"] {
    background-image: url(../../assets/image/resources/slide1_btn3_off.png);
    position: absolute;
    top: 852px;
    left: 1693px;
    width: 239px;
    height: 73px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup3"].active {
    background-image: url(../../assets/image/resources/slide1_btn3_on.png);
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup4"] {
    background-image: url(../../assets/image/resources/slide1_btn4_off.png);
    position: absolute;
    top: 720px;
    left: 2932px;
    width: 280px;
    height: 73px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup4"].active {
    background-image: url(../../assets/image/resources/slide1_btn4_on.png);
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup5"] {
    background-image: url(../../assets/image/resources/slide1_btn5_off.png);
    position: absolute;
    top: 720px;
    left: 3233px;
    width: 280px;
    height: 73px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="openpopup5"].active {
    background-image: url(../../assets/image/resources/slide1_btn5_on.png);
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .popup-slide[popupid="popup1"] {
    background-image: url(../../assets/image/resources/slide1_popup1.png);
    position: absolute;
    top: 570px;
    left: 1358px;
    width: 2352px;
    height: 1049px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .popup-slide[popupid="popup2"] {
    background-image: url(../../assets/image/resources/slide1_popup2.png);
    position: absolute;
    top: 570px;
    left: 1358px;
    width: 2352px;
    height: 1049px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .popup-slide[popupid="popup3"] {
    background-image: url(../../assets/image/resources/slide1_popup3.png);
    position: absolute;
    top: 1329px;
    left: 139px;
    width: 3558px;
    height: 493px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .popup-slide[popupid="popup4"] {
    background-image: url(../../assets/image/resources/slide1_popup4.png);
    position: absolute;
    top: 571px;
    left: 141px;
    width: 2340px;
    height: 1049px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .popup-slide[popupid="popup5"] {
    background-image: url(../../assets/image/resources/slide1_popup5.png);
    position: absolute;
    top: 571px;
    left: 141px;
    width: 2340px;
    height: 1049px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .popup-slide .button-close-popup {
    position: absolute;
    top: -25px;
    right: -25px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="1"] .button-slide[buttonid="guidelines"] {
    background-image: url(../../assets/image/resources/btn_resources_guidelines.png);
    position: absolute;
    top: 1330px;
    left: 1382px;
    width: 1080px;
    height: 186px;
}

/* SLIDE 2 */
.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"]  {
    background-image: url(../../assets/image/resources/slide2.png);
    width: 100%;
    height: 100%;
    position: absolute;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .button-slide[buttonid="backresources"] {
    position: absolute;
    top: 32px;
    left: 0;
    width: 820px;
    height: 147px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .button-slide[buttonid="returnpatientcase"] {
    background-image: url(../../assets/image/resources/btn_returnpatientcase.png);
    position: absolute;
    top: 60px;
    left: 2925px;
    width: 684px;
    height: 85px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .button-slide[buttonid="openpopup1"] {
    position: absolute;
    top: 320px;
    left: 343px;
    width: 1061px;
    height: 1379px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .button-slide[buttonid="openpopup2"] {
    position: absolute;
    top: 320px;
    left: 1455px;
    width: 1061px;
    height: 1379px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .button-slide[buttonid="openpopup3"] {
    position: absolute;
    top: 320px;
    left: 2565px;
    width: 901px;
    height: 1379px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide[popupid="popup1"] {
    background-color: #f1f2f3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3000px;
    height: 1500px;
    border-radius: 50px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide[popupid="popup1"] .scrollable-container {
    width: 90%;
    height: 1360px;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    margin-left: 5%;
    top: 80px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide[popupid="popup1"] .scrollable-container .image-popup {
    background-image: url(../../assets/image/resources/slide2_popup1.png);
    height: 3495px;
    background-size: 100% auto;
    background-repeat: no-repeat;
}


.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide[popupid="popup2"] {
    background-color: #f1f2f3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3000px;
    height: 1500px;
    border-radius: 50px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide[popupid="popup2"] .scrollable-container {
    width: 90%;
    height: 1360px;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    margin-left: 5%;
    top: 80px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide[popupid="popup2"] .scrollable-container .image-popup {
    background-image: url(../../assets/image/resources/slide2_popup2.png);
    height: 3495px;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide[popupid="popup3"] {
    background-color: #f1f2f3;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3000px;
    height: 1500px;
    border-radius: 50px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide[popupid="popup3"] .scrollable-container {
    width: 90%;
    height: 1360px;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    margin-left: 5%;
    top: 80px;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide[popupid="popup3"] .scrollable-container .image-popup {
    background-image: url(../../assets/image/resources/slide2_popup3.png);
    height: 3950px;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.app-area[area="resources"] .app-section[group="main"] .app-slide[slide="2"] .popup-slide .button-close-popup {
    position: absolute;
    top: -25px;
    right: -25px;
}

/* Hide scrollbar for WebKit browsers */
.scrollable-container::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE and Edge (older versions) */
.scrollable-container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;     /* Firefox */
}